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

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

2 голосов
/ 07 сентября 2011

Я пытаюсь поднять свои веб-формы с помощью собственных радиокнопок и флажков. Для этого я скрываю само радио / флажок и создаю элемент метки состояния на метке с помощью псевдокласса: 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

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

Я что-то здесь упускаю?

Привет

1 Ответ

4 голосов
/ 07 сентября 2011

Shoot! Обнаружил свою ошибку, скопировав код в 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 (чтобы показать их -inside- метку) Что я наблюдал, так это то, что только проверенные метки были сделаны относительными. Таким образом, абсолютное положение элемента any: after, созданного на непроверенных элементах, привело к их размещению вне экрана.

Решение: сделал каждую позицию этикетки: относительно начала.

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

...