Почему атрибута checked нет, но input выбран?

Question

[dotabred]

Есть чекбокс. К атрибуту checked привязаны псевдоэлементы after и before, которые и заполняют сам чекбокс. При клике на инпут, атрибут checked не появляется, но при этом в DOM появляются псевдоэлементы before и after, как будь-то атрибут checked есть. Почему так?

Песочница:


Скрин:

spoiler

Код:

spoiler

<input type="checkbox" class="input--checkbox" name="access_3833_774" value="chanel_idea"> Текст

.input--checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: relative;
    top: 2px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    height: 14px;
    min-width: 14px;
    min-height: 14px;
    max-width: 14px;
    max-height: 14px;
    transition: all 0.15s ease-out 0s;
    background: #fff;
    border: 1px solid #E0E0E0;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    margin: 0;
    outline: none;
    position: relative;
}

.input--checkbox:hover {
    border: 1px solid #2d9cdb;
}

.input--checkbox[disabled]:checked {
    background: #c2e9ff;
    border: 1px solid #c2e9ff;
}

.input--checkbox:checked {
    background: #2d9cdb;
    border: 1px solid #2d9cdb;
}

.input--checkbox:checked::before {
    content: '';
    position: absolute;
    left: 4px;
    top: .5px;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}


.input--checkbox:checked::after {
    background: #2d9cdb;
    content: '';
    display: block;
    position: relative;
}

Comments

[Ankhena]

К атрибуту checked привязаны псевдоэлементы after и before

input одиночный тег и у него нет псевдоэлементов. То, что какие-то браузеры их показывают это чисто любезность, а не гарантия отображения.

[dotabred]

Я знаю. Тут используется эдакий хак. Если задать пседоэлементы (after и before) чисто инпуту, а-ля: input::after - то ничего не произойдёт, after-а не будет. А вот если пседоэлементы (after и before) присвоить псевдоклассу checked, input:checked::before - то всё ок

[Ankhena]

dotabred,

Если задать пседоэлементы (after и before) чисто инпуту, а-ля: input::after - то ничего не произойдёт, after-а не будет.

Будет.
Ровно тоже самое, что и для :checked::before.

Answer 1

[WapSter]

Уверен что не появляется? https://jsfiddle.net/znsykacm/ загляни в консоль

Comments

[dotabred]

Я приложил скрин. Видите, на скрине в DOM-е у input-а нет этого атрибута, хотя чекбоск выбран. Это получается, что этот атрибут просто не отображается по какой-то причине в DOM-е? Проверял в Огнелисе и Хромиуме

[WapSter]

dotabred, можно и так сказать. Он есть в объекте элемента этого достаточно. Посмотреть объект элемента можно при помощи console.dir(el)

[dotabred]

WapSter, спасибо. Что-то меня это совсем в ступор вогнало. Я не мог понять, что вообще происходит и как это работает

Answer 2

[Василий Летуев]

devtools браузера не обновляет атрибут checked
вот почему:
https://stackoverflow.com/questions/51743810/chrom...
также на stackoverflow предлагают смотреть не во вкладку elements а во вкладку properties