Не получаются радиобаттоны и чекбоксы и их цвет [18/18]

Здравствуйте. Прошу помощи. Задание засчитано на 97%, но у меня не получается проявить радио, придать checked нужный цвет и вложить отметку, что чекбокс или радио выбран.
`

input[type=“radio”],
input[type=“checkbox”] {
display: none;
}

label[for$="-2"] {
color: #7f8c8d;
vertical-align: middle;
}

input[type=“checkbox”] + label:before {
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #fff;
box-shadow: 0 0 0 3px #bdc3c7;
}

input[type=“radio”] + label {
border-radius: 50%;
}

#checkbox-1 {
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

label[for$="-1"] {
color: #1abc9c;
}

input[id$="-3"] {
box-shadow: 0 0 0 3px #ecf0f1;
}

label[for$="-3"] {
color: #ecf0f1;
}

input[type=“text”] {
margin-bottom: 10px;
padding: 2px 5px;
width: 95%;
height: 24px;
color: #000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}

input:required {
border-color: #e74c3c;
}

input[type=“text”]:disabled {
border-color: #ecf0f1;
color: #bdc3c7;
background: #f5f5f5;
}

input[pattern] {
border-color: #e74c3c;
color: #c0392b;
background: #F2A097;
}>`

1 лайк

Это правильный вариант, задавайте вопросы, если что-то не понятно.
input[type=checkbox],
input[type=radio]{
display: none;
}
input[type=checkbox] + label,
input[type=radio] + label {
color: #7f8c8d;
vertical-align: middle;
}
input[type=checkbox] + label:before,
input[type=radio] + label:before{
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #fff;
box-shadow: 0 0 0 3px #bdc3c7;
}
input[type=“radio”]+label:before {
border-radius: 50%;
}
input:checked+label:before{
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}
input:checked+label {
color: #1abc9c;
}
input:disabled+label:before{
box-shadow: 0 0 0 3px #ecf0f1;
}
input:disabled+label {
color: #ecf0f1;
}
input[type=“text”]{
margin-bottom: 10px;
padding: 2px 5px;
width: 95%;
height: 24px;
color: #000;
border: 2px solid #bdc3c7;
border-radius: 5px;
vertical-align: middle;
}
input:required{
border-color: #e74c3c;
}
input:disabled{
border-color: #ecf0f1;
color: #bdc3c7;
background: #f5f5f5;
}
input:invalid{
border-color: #e74c3c;
color: #c0392b;
background: #F2A097;
}

2 лайка

Спасибо, разобрала свои ошибки.

1 лайк

Александра, мне понравился Ваш код. Но мне что интересно?! А пробуют ли другие ученики, как я и Вы, например, посмотреть эту или другую урок-работу-сайт в реальном исполнении? Ну, не в мини-браузере htmlacademy, а в хроме или в мазиле или в интернет-эксплорере. Вопрос: - какой инструмент при этом лучше употребить для создания сайта из наших учебных HTML и CSS кодов?? Спасибо. Виктор. тел. 89267812613. Буду весьма признателен.

Редактор кода brackets или sublime text 3, если вы об этом) ну плюс плагины для него) такие как emmet. Если вы об этом конечно)

Алексей, спасибо Вам. Да Вы правы об этом. Устал от упражнений. Хотел бы в реале. Не смогли бы подсказать, откуда можно скачать на русском фри? Еще раз спасибо, что откликнулись. Виктор.тел. 89267812613.

http://brackets.io он в принципе русифицированный идет, я сейчас им пользуюсь мне нравиться, там и связь с фотошопом есть для верстки PSD макетов.
https://www.youtube.com/watch?v=O3_gus8nb0Q&list=PLPpaecEYRC8bGw3oj3ecnPjSe09r4bPyo
а вот отличные уроки по данному редактору чтобы его настроить.
На youtube найдите master-css там много полезного.

2 лайка

Битый час пытаюсь выполнить задание - не получается. Подскажите, кто знает. (Выполнено на 97%)


body {
width: 550px;
}

form {
width: 400px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
background-color: #ffffff;
box-shadow: 0 0 10px #cccccc;
}

fieldset {
padding: 10px;
border: 1px solid #34495e;
border-radius: 5px;
}

fieldset legend {
color: #34495e;
}

.half-width {
display: inline-block;
width: 50%;
margin-right: -4px;
}

label {
display: block;
margin-bottom: 5px;
margin-top: 10px;
}

input[type=“radio”],
input[type=“checkbox”] {
display: none;
}

input[type=checkbox] + label,
input[type=radio] + label {
vertical-align: middle;
color: #7f8c8d; /gray/
}

input[type=“checkbox”] + label:before,
input[type=“radio”] + label:before] {
content: “”;
display: inline-block;
width: 7px;
height: 7px;
margin-right: 8px;
vertical-align: middle;
border: 3px solid #ffffff;
box-shadow: 0 0 0 3px #bdc3c7; /light gray/
}

input[type=“radio”]+label:before {
border-radius: 50%;
}

input:checked+label:before {
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

input:checked+label {
color: #1abc9c;
}

input:disabled+label:before {
box-shadow: 0 0 0 3px #ecf0f1; /white/
}

input:disabled+label {
color: #ecf0f1;
}

input[type=“text”] {
width: 95%;
height: 24px;
margin-bottom: 10px;
padding: 2px 5px;
color: #000;
border: 2px solid #bdc3c7;/light gray/
border-radius: 5px;
vertical-align: middle;
}

input:required {
border-color: #e74c3c; /red/
}

input:disabled {
color: #bdc3c7;
background: #f5f5f5;/white/
border-color: #ecf0f1;/white/
}

input:invalid {
color: #c0392b;
background: #f2a097;/light red/
border-color: #e74c3c;
}

[quote=“KIRILL_VASILEVICH, post:8, topic:3489”]
input[type=“checkbox”] + label:before,input[type=“radio”] + label:before] { content: “”;
вот ошибка, квадратная скобка после бефор

1 лайк

Спасибо, добрый человек :slight_smile:

Алексей, спасибо, попробую.

Всегда пожалуйста😊

Алексей, спасибо Вам. Успешно прошел 27 уроков из 33 по Brackets ver-1.0, что на YouTube MasterCSS. На 28 уроке в затык попал. Думаю потому, что я, не нашедши Brackets ver-1.0, скачал и установил ver-1.7.
На что сетую? Почему нет нигде инкубаторов для пожилых людей. Мне нравится заниматься IT технологиями, но часто попадаю в затык и хожу по кругу. Потому как нет четкого представления что за чем следует. Надо мне это или нет, и в какой глубине.
Цель моя научиться верстать блоги и простые сайты - что б от зубов отскакивало! Много курсов прошел а результатов нет. Нужен наставник, руководитель. А где его взять?! Стажером никто не берет, даже бесплатно. Возраст видать, так я вроде не собираюсь в ближайшие 10 лет в мир иной. . А кирпич с крыши и на молодого человека может упасть. Но Вам Алексей, все равно спасибо. У Вас есть душа и хорошее завтра.
С уважением Виктор Дьяконов
Тел. 8-926-781-26-13

Да, уроки немного не по той версии, если хотите практики могу поссоветовать http://nnmclub.to/forum/viewtopic.php?t=1008937
http://nnmclub.to/forum/viewtopic.php?t=933875
Эти видеокурсы дадут вам чоткие основы и практику, к сожаленью в наше время наставник это только платные курсы на различных ресурсах

Да, Вы правы, Алексей! Но неужто в Вашем славном и слаженном коллективе нет места куда бы мог придти очень заинтересованный человек и вживую побеседовать с гуру. Не бывает такого среди интеллигентных людей. Раз пришел. Два пришел. А Вы и говорите, к примеру ему, что такие визиты будут стоить столько то. И компромисс получен. И человек не обижен. Спасибо. С уважением Виктор Дьяконов, Тел. 8-926-781-26-13.

К сожалению я такой же новичок как и вы Виктор. На данном ресурсе есть платные интенсивы, один из которых будет 1 августа, вот ссылка https://htmlacademy.ru/intensive/htmlcss, и вот код на небольшую скидку если вас заинтересует данный интенсив 1995717ee80