Советы, недочеты, исправления.

Курсы §23. Селекторы. Часть 3
1

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

label[for$="-2"]{
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:not([type=“text”])+label[for$="-1"]::before{
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

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

input:not([type=“text”])+label[for$="-3"]::before{
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:disabled{
border-color: #ecf0f1;
color: #bdc3c7;
background: #f5f5f5;
}

input:invalid{
border-color: #e74c3c;
color: #c0392b;
background: #F2A097;
}
долго сидел тупил пока не залез за подсказкой

вот эту строку уже сам переделал на попроще:

label[for^=“checkbox”]::before,[for^=“radio”]::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;
}

2

И еще кто мне объяснит почему чекбоксы и радиобатоны как картинки, или я что то не то сделал, мне кажется надо чтоб они были стилизованы и кликабельны.

3

И еще одна версия кода того же испытания.

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

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

label[for^=“checkbox”]::before,[for^=“radio”]::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;
}

label[for^=“radio”]::before{
border-radius: 50%;
}

label[for$="-1"]:not([type=“text”])::before{
background: #1abc9c;
box-shadow: 0 0 0 3px #1abc9c;
}

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

label[for$="-3"]:not([type=“text”])::before{
box-shadow: 0 0 0 3px #ecf0f1;
}

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

[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;
}`

4

Конечно, надо чтобы переключатели были живыми. Сами поля вы спрятали (display: none;), но поскольку они связаны с надписями (label), то при нажатии на надпись поле должно активизироваться. Поле скрыто, поэтому изменения будут видны на псевдоэлементе.
“Когда поле выбрано, у псевдоэлемента подписи меняется фон и цвет тени. (input:checked+label:before) Одновременно с этим меняется цвет самой подписи ( input:checked +label)”.

2 лайка
5

понял завтра изменю код, спасибо.

1 лайк
6

Что все так идеально что даже никто больше советов не даст по оптимизации?:slight_smile:

7

Я могу продолжить))

8

Дак надо было сразу))) для этого тема и была создана

9

Ваш вариант сработал теперь кнопки интерактивные, надо запомнить вариант с :checked

10

body {
width: 550px;
}

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

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

fieldset legend {
color: #34495e;
}

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

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

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

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

label[for^=“radio”]::before,[for^=“checkbox”]::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;
}

label[for^=“radio”]::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;
}

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

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

:required{
border-color: #e74c3c;
}

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

input:invalid{
border-color: #e74c3c;
color: #c0392b;
background: #F2A097;
}
еще немного оптимизировал

11

Еще это:
При переключении чекбокса и радиокнопки на “неактивную”, бывшая активная label остается черного цвета.
input[type=checkbox] + label,
input[type=radio] + label {
color: #7f8c8d;
vertical-align: middle;
}
Без изменения этого селектора было не 100%.
input:disabled+label{
color: #ecf0f1;
}
К остальному вопросов не имею, разве что на счет сокращенной записи селектора [type=“checkbox”],[type=“radio”], :disabled, :required.
Раньше видеть не приходилось. Где такое видели?

12

Толи в статье где то прочитал, толи в курсе были данные примеры, просто на этом внимание не с акцентировали, а я как то машинально запомнил данный прием.

input:disabled+label{
color: #ecf0f1;
} - не знаю почему было не у меня проверка на 100% было

input[type=checkbox] + label,
input[type=radio] + label {
color: #7f8c8d;
vertical-align: middle;
} - ну и вот это я все же написал бы как
[type=“checkbox”],[type=“radio”]+label - где то запомнил, некоторые вещи прочитал, что то сам попробовал для сокращения кода.

Спасибо за конструктивную критику и советы!

13

Всегда пожалуйста) Если встретите статью про сокращенную запись селекторов, поделитесь, ладно?

14

Хорошо.

15

в принципе первое же задание курса селекторы часть 3

[class^=“column-”]{
/* общие свойства: отступы, рамки, фон и т.д. */
}
.column-1 { width: 100px; }
.column-2 { width: 200px; }
.column-3 { width: 300px; }

видите как написан селектор, а ведь он находиться в блоке div но не указан в начале селектора, я думаю именно из за этого я решил попробовать в испытании сокращение.

1 лайк
16

Хм… Надо же как я была невнимательна в январе… Селекторы будем проходить заново. Спасибо за оперативность)

17

Да не за что, я думаю в этом наше деле можно учиться вечно, главное делиться опытом и знаниями.

1 лайк
18

Здравствуйте. Можно уточнить, как именно тут связаны скрытые формы и псевдоэлемент перед label. Вроде бы сам чекбокс или радио скрыт, но как он все же выделяется при щелчке?

19

label связан с полем при помощи атрибута for.

20

Получается, что и псевдоэлемент label::before также привязывается к форме?