Пользовательские флажки бездействия в Firefox

Я пытаюсь сделать пользовательские флажки с CSS3, который отлично работает на Chrome. На Firefox... не так много.

Изменить: он работает нормально на Firefox 37.

Ответ ниже по-прежнему актуальный, но проблемы, связанные с стилем с середины 2013 года, разрешены.

Поддержка IE здесь не упоминается, но изменения/ответы относительно ее приветствуются.

демонстрация

HTML:

<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>

CSS:

input[type=checkbox] {
  appearance: none;
  background: transparent;
  position: relative;
}
input[type=checkbox]::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  text-align: center;
  background: #aaa;
  display: block;
  pointer-events: none;
  opacity: 1;
  color: black;
  border: 3px solid black;
}
input[type=checkbox] + label {
  line-height: 48px;
  margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
  content: '';
  background: #32cd32;
  opacity: .3;
}
input[type=checkbox]:checked::after {
  content: '\2713';
  background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
  opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
  width: 48px;
  height: 48px;
  font-size: 46px;
  line-height: 48px;
  vertical-align: middle;
  border-radius: 50%;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Примечание. Я удалил префиксы поставщиков и такие вещи, как пользовательский выбор для краткости. Полный код находится в ручке.

Что мне нужно изменить, чтобы он выглядел так же в Firefox, как в Chrome?

Желаемая:

chrome desired look

Не требуется:

firefox bad look

Ответы

Ответ 1

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

input[type=checkbox]::after

к

input[type=checkbox] + label::after

Даунсайд:

  • требуется метка

Но:

  • HTML требует, чтобы элементы ввода имели метку

Вывод:

  • только для неверного HTML

Ответ 2

Технически не требуется ЭТИКЕТКА, но требуется контроль над меткой, чтобы гарантировать, что после установки флажка имеется доступный для целевого пользователя брат.

то есть.

input[type=checkbox] + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}

input[type=checkbox]:checked + span::after{
  display:block;
  width:50px;
  height:50px;
  background:yellow;
  display:block;

}
    <input type="checkbox"></input>
    <span class="targetMe"></span>

Ответ 3

Проблема заключается в том, что :after и ::after технически создают элемент как последний дочерний элемент, к которому применяется псевдоселектор. Firefox не любит создавать дочерние элементы внутри своих флажков. Это фактически часть более крупной темы, которая заменила элементы.

Вы увидите ту же проблему с псевдоэлементами :before и ::before, которые не работают с флажками, потому что они будут создавать элементы в качестве первого дочернего элемента внутри выбранного элемента.

Ответ 4

У меня была такая же проблема. Наконец, я получил видимый флажок с его собственным стилем, добавив одно свойство

-moz-appearance:initial

Это свойство изначально (на платформе) применяет его внешний вид как темы ОС.

Ответ 5

Вы можете включить пользовательские стили для флажка специально для браузера Mozilla, добавив это свойство, и оно работает для меня.

-moz-appearance:initial