Пользовательский флажок с CSS :: before - не работает в Firefox / Edge - PullRequest
Новая
       22

Пользовательский флажок с CSS :: before - не работает в Firefox / Edge

0 голосов
/ 26 апреля 2019

Я столкнулся с очень раздражающей проблемой CSS, пытаясь заставить проект работать в кросс-браузерном режиме (не беспокоиться об IE, это всего лишь хобби-проект, но было бы неплохо заставить его работать на всех современных браузерах в по крайней мере). Это относится к некоторым флажкам, к которым я хочу применить пользовательские стили - я знаю, что вы не можете сделать очень много со стандартным HTML <input type="checkbox">, поэтому я сделал то, что рекомендуется во многих местах, и использовал псевдоэлемент ::before , И я остался доволен результатом в Chrome. Вообразите мое удивление, когда обнаружите, что мой пользовательский флажок просто не отображает вообще в Firefox!

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

input[type="checkbox"] {
    visibility: hidden;
}

input[type="checkbox"]::before {
    visibility: visible;
    content: "";
    display: block;
    width: 1.1em;
    height: 1.1em;
    color: #eddc23;
    border: 1px solid #eddc23;
    background-color: #540123;
    border-radius: 35%;
    line-height: 1.27;
    text-align: center;
    cursor: pointer;
}

input[type="checkbox"]:checked::before {
    content: "\2713";
}
<input type="checkbox">

Это должно показать темно-красный флажок, который имеет желтую галочку при выборе. Он отлично работает в Chrome и Opera, но совсем не работает в Firefox или Edge. (Вот ссылка codepen на тот же случай, если фрагмент кода переполнения стека каким-либо образом демонстрирует другое поведение.) CSS не является одной из моих сильных сторон, и, несмотря на несколько часов экспериментов и поиска в Google, я озадачен.

Буду признателен за любые указания, не только о том, как получить этот рабочий кросс-браузер, но и о , почему не работает на FF / Edge. (Проверка элемента в Firefox вообще не обнаруживает никаких признаков псевдоэлемента ::before. Я также исключил, что это связано с пустым свойством content, так как изменение его на реальный текст не делает его видимым в соответствующие браузеры.)

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 26 апреля 2019

Иногда с метками вы можете решить этот тип проблем 

input[type="checkbox"] {
  display: none;
}

span {
  visibility: visible;
  content: "";
  display: block;
  width: 1.1em;
  height: 1.1em;
  color: #eddc23;
  border: 1px solid #eddc23;
  background-color: #540123;
  border-radius: 35%;
  line-height: 1.27;
  text-align: center;
  cursor: pointer;
}

input[type="checkbox"]:checked + label span::before {
  content: "\2713";
}
<input type="checkbox" id="checkbox">
<label for="checkbox">
  <span></span>
</label>
0 голосов
/ 27 апреля 2019

Для краткости записи я в итоге поставил <div> в качестве следующего родственного элемента флажка, скрыл флажок с opacity: 0; и поместил div поверх флажка, но с более низким z-индекс.Это означает, что «поддельный» флажок реагирует так же, как действительный, и, сохраняя фактический флажок в DOM, мы надеемся, что это все равно даст разумную оценку доступности.

...