Стиль CSS для флажков

Question

Можно ли стилизовать флажок HTML без использования JavaScript?Этот код, например, будет хорошо работать с IE, но не с Firefox или Chrome.http://jsfiddle.net/5wJxF/ Есть предложения?

Answer 1

YES.Это возможно возможно.

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

<input type="checkbox" id="field1" class="mycheckbox" />
<label for="field1" class="mycheckbox-label">Label here</label>

И тогда ваш CSS будет выглядеть так:

.mycheckbox {
  display:none;
}

.mycheckbox + label {
  padding:20px; /*or however wide your graphic is*/
  background:url(/fancy-unchecked.gif) no-repeat left center;
}

.mycheckbox:checked + label {
  background:url(/fancy-checked.gif) no-repeat left center;
}

Вот рабочий пример: http://jsfiddle.net/TVaPX/ (протестировано с Firefox 5)

Проблема этого подхода в том, что он работает только в современных браузерах.Старые браузеры могут не поддерживать CSS-селекторы :checked или +.Но если вы согласны не поддерживать старые версии IE, это сработает.Приведенный выше пример не работает в IE8 (он поддерживает +, но не :checked).

Если вам это неудобно, вам придется придерживаться решения Javascript.

Однако, с подходом, подобным этому, вы все равно можете сделать это с очень минимальным количеством кода Javascript: просто установите однострочный JS, который переключает класс флажка, когда он установлен, и вы можете использовать всекод выше, но с альтернативным именем класса вместо селектора :checked.Это будет работать в IE7 и IE8.

Надеюсь, это поможет.

Answer 2

Нет, это невозможно.Внешний вид флажков зависит от ОС и браузера.Только решения на основе JavaScript позволяют стилизовать их так, чтобы они работали во всех браузерах.

Вам может понравиться этот плагин .Он прост в использовании и дает удовлетворительные результаты.

Answer 3

Вы можете стилизовать его с помощью CSS3 (только Chrome или Safari!), Но для всего, что угодно, - иначе, чем в js.

Здесь есть более 40 примеров: ДЕМО-УСТРОЙСТВА ФОРМ

Есть несколько плагинов - я использовал jNice - не только чистый CSS3для современного браузера и стандартного флажка / выпадающего списка для всего остального.

С наилучшими пожеланиями,

Пит