Стиль флажка для Firefox

Question

Стиль флажка для Firefox

0

У меня есть эта система флажков, чтобы иметь выпадающее меню только для HTML и CSS, а система должна иметь флажок прямо перед li который имеет подменю.

Я действительно не знаю, как преобразовать стиль в элемент ::after или ::before с помощью <label> поэтому он работает с Firefox, Chrome, Safari и IE-латев.

Я включаю эту ссылку в мой jsfiddle для оригинального дизайна.

Samuel Charpentier 06 май 2014, в 18:06

Источник

1

Что вы пытаетесь достичь?
cale_b 06 май 2014, в 15:53
0

Ваш HTML неверен. Вы не можете иметь элементы между элементами списка. Вы должны иметь тогда внутри LI. Схема того, что вы хотите, было бы полезно.
Diodeus - James MacFarlane 06 май 2014, в 15:54
0

Если вы можете открыть это в Chrome, поведение работает, если мне нужно переместить флажок внутри li, мне придется изменить поведение css. Проблема в том, что в Firefox стили флажков не отображаются должным образом, они выглядят как большие флажки. Должен быть способ, без Javascript, сделать так, чтобы он выглядел так, как на Chrome внутри Firefox.
Samuel Charpentier 06 май 2014, в 16:01
0

Firefox не поддерживает стилизацию элементов флажков. Вам нужно будет использовать псевдоэлементы, возможно, в сочетании с непрозрачностью.
Andy Mercer 06 май 2014, в 16:49

Показать ещё 2 комментария

Теги:

html

css

css3

checkbox

1 ответ

Ещё вопросы

Ваш HTML неверен. Вы не можете иметь элементы между элементами списка. Вы должны иметь тогда внутри LI. Схема того, что вы хотите, было бы полезно.
Если вы можете открыть это в Chrome, поведение работает, если мне нужно переместить флажок внутри li, мне придется изменить поведение css. Проблема в том, что в Firefox стили флажков не отображаются должным образом, они выглядят как большие флажки. Должен быть способ, без Javascript, сделать так, чтобы он выглядел так, как на Chrome внутри Firefox.
Firefox не поддерживает стилизацию элементов флажков. Вам нужно будет использовать псевдоэлементы, возможно, в сочетании с непрозрачностью.

Samuel Charpentier · Accepted Answer · 2014-05-07T17-38-00.000Z

Фактически, это мое решение; используйте <label> и ::after элементы, чтобы установить все это. Я исправил его на Fiddle и вот результат.