оформление флажка формы css с помощью тегов checked и after

Я пытаюсь создать форму без использования JavaScript или JQuery. Он включает в себя ряд флажков. Идея состоит в том, чтобы после флажка отображать некий gif, если он не установлен. В противном случае ничего не отображать после него. Это код, который у меня есть:

input[type=checkbox]::after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:15px;
  z-index:100;
}
input[type=checkbox]:checked::after
{
  content:"";
}

Он работает в Chrome, но не работает в Firefox или IE. Что не так?


css cross-browser pseudo-element css-content
person user1316401    schedule 07.05.2013    source источник
comment
input - это элемент с пустой моделью содержимого, а поскольку ::after псевдоэлементы отображаются как дочерний узел элемента, к которому они применяются, возникает конфликт. Некоторые браузеры все равно позволяют это делать, некоторые - нет. Для форматирования элемента, который вы помещаете после входного элемента, используйте вместо него комбинатор соседнего брата. w3.org/TR/2011/REC -css3-selectors-20110929 /   -  person CBroe    schedule 08.05.2013
comment
Спасибо, это все объясняет. Но я все еще не могу заставить его работать. Например, если я помещаю тег p после флажка, следующий селектор CSS не работает: input [type = checkbox]: checked + p: after   -  person user1316401    schedule 08.05.2013

Ответы (2)


arrow_upward
11
arrow_downward

Кроссбраузерное решение, которое сработало для меня, заключалось в том, чтобы включить пустую метку (с классом «checkbox_label») после ввода флажка и затем стилизовать его, а не флажок.

input[type=checkbox] + label:after
{
  content: url(images/unchecked_after.gif);
  position:relative;
  left:0px;
  top:1px;
  z-index:100;
}

input[type=checkbox]:checked + label:after
{
  content:"";
}

.checkbox_label
{
  height:0px;
  width:0px;
  display:inline-block;
  float:left;
  position:relative;
  left:20px;
  z-index:100;
}
person user1316401    schedule 07.05.2013
comment
привет, спасибо за ответ, можете ли вы дать ссылку или как называется оператор + ...? в контексте - person Ganesh Vellanki; 09.04.2015
comment
селектор element1 + element2 выбирает element2, который идет сразу после element1. - person ZitRo; 06.04.2016

arrow_upward
3
arrow_downward

Судя по всему, использование псевдоэлементов ::before и ::after не поддерживается спецификацией. Ответ на ваш вопрос находится здесь. Надеюсь, это поможет!

person CoderOfHonor    schedule 07.05.2013
comment
Я тестирую Firefox 20 и IE10, поэтому решил, что делаю что-то не так ... но что? - person user1316401; 08.05.2013
comment
Я пробую использовать jsfiddle с помощью firefox и могу воспроизвести вашу ошибку. Дай мне посмотреть, смогу ли я найти решение. - person CoderOfHonor; 08.05.2013
comment
Думаю, я нашел проблему. Я отредактировал это в своем ответе. - person CoderOfHonor; 08.05.2013
comment
К сожалению, упаковка ввода в тег span тоже не сработала. Черт, просто продолжай пробовать разные вещи, я думаю ... - person user1316401; 08.05.2013
comment
Хм ... Обертка ввода в тег span у меня сработала. Вы уверены, что применяете стиль ::after к тегу span, а не к тегу input? - person CoderOfHonor; 08.05.2013
comment
Я не мог заставить это работать. Но то, что я сделал, добавил после флажка пустой тег label и присвоил ему стиль height: 0px; ширина: 0 пикселей; дисплей: встроенный блок; плыть налево; положение: относительное; слева: 20 пикселей; z-index: 100 ;, а затем использовал селекторы братьев и сестер, например input [type = checkbox]: checked + label: after. - person user1316401; 08.05.2013
comment
Вот пример: jsfiddle.net/5dRXg - person CoderOfHonor; 08.05.2013
comment
Этот JSFiddle не работал в Firefox и был искажен в Chrome. Мое решение работает нормально в обоих случаях. Спасибо за помощь. - person user1316401; 08.05.2013
comment
Хорошо, рад помочь. Кстати, этот jsfiddle использовал текст вместо изображения, потому что у меня не было изображения, которое можно было бы связать с ним. - person CoderOfHonor; 08.05.2013