CSS: псевдоэлемент after в сочетании с [checked]: разные элементы after не работают?

Я пытаюсь поднять свои веб-формы, стилизуя свои собственные радиокнопки и флажки. Для этого я скрываю само радио/флажок и создаю на этикетке элемент, указывающий состояние, с помощью псевдокласса :after, например так:

.pn_multi label{
    display:    inline-block;
    border:     1px dotted #FFF;

    opacity:    0.6;

    text-align: center;
}
.pn_multi label:hover{
    border:     1px dotted #444;
    opacity:    0.8;
}

.pn_multi input[type=radio]:checked + label, .pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

/* generic icon */
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox] + label:after {

    display:    block;
    position:   absolute;
    right:      1px;
    bottom:     1px;
    overflow:   hidden;

        /* a lot more styling here, took out for space */
}

/* specific icon colors*/
.pn_multi input[type=checkbox] + label:after {
    content: "\2714  ";
    background: #FF9393;
    color:      #F22;
    border:     1px solid #F22;
}
.pn_multi input[type=radio]:checked + label:after, .pn_multi input[type=checkbox]:checked + label:after {
    content: "X  ";
    background: #97FF97;
    color:      #063;
    border:     1px solid #063;
}

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

.pn_multi input[type=checkbox] + label:after

часть вообще не захватывает, или как псевдокласс :checked перезапишет свой автономный.

Я пропустил что-то важное здесь?

С Уважением


css pseudo-element pseudo-class
person Wortex17    schedule 06.09.2011    source источник
comment
Не могли бы вы сделать демонстрацию на jsfiddle.net? Это поможет.   -  person BoltClock    schedule 07.09.2011
comment
О, приятно видеть, что вы решили это! Я полагаю, вы могли бы вместо этого отредактировать ответ.   -  person BoltClock    schedule 07.09.2011
comment
Продолжайте и опубликуйте ваше решение в качестве ответа!   -  person Nightfirecat    schedule 07.09.2011
comment
Я отвечу, как только смогу => Пользователи с репутацией менее 100 не могут ответить на свой вопрос в течение 8 часов после того, как задали его. Вы можете самостоятельно ответить в течение 7 часов. До тех пор, пожалуйста, используйте комментарии или вместо этого отредактируйте свой вопрос.   -  person Wortex17    schedule 07.09.2011

Ответы (1)


arrow_upward
5
arrow_downward

Стрелять! Нашел свою собственную ошибку, скопировав код в jsfiddle, как это предложил BoltClock, хотя и не использовал его в конце.

Порблема это часть кода

.pn_multi input[type=radio]:checked + label, 
.pn_multi input[type=checkbox]:checked + label {
    background: #CCE6FF;
    border:     1px dotted #FFF;
    opacity:    1.0;
    position:   relative;
}

А точнее, положение: относительное. Мне это нужно было только для того, чтобы иметь возможность устанавливать абсолютные позиции для элементов :after (чтобы показать их внутри метки). Я следил за тем, чтобы таким образом относительными становились только проверенные метки. Таким образом, абсолютная позиция любых элементов :after, созданных на неотмеченных элементах, приводила к их расположению за пределами экрана.

Решение: сделал каждую метку position:relative с самого начала.

Спасибо и извините за неудобства

person Wortex17    schedule 07.09.2011