Пользовательский флажок

Question

Здравствуйте, я пытаюсь создать пользовательский флажок для моего сайта, как ссылка на изображениеЧто было бы лучшим способом сделать это?Большое спасибо.

Answer 1

Существует CSS-трюк, который на самом деле работает, скрывая флажок (или радио), определяя метку (которая во всех соответствующих браузерах будет включать / выключать флажок), которая будет визуальным представлением, и используя :checkedи + селекторы.

Это простой пример:

.foscheck input { display: none; }
.foscheck label { display: block; width: 20px; height: 20px; background: red; }
.foscheck input:checked + label { background: blue; }

<div class="foscheck">
  <input type="checkbox" id="fos1" />
  <label for="fos1"></label>
</div>

jsFiddle Demo

Недостатки: селектор :checked, к сожалению, делаетне работает на IE , только от IE9.Вы можете применить запасной вариант Javascript только для IE с помощью условных комментариев.

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

Answer 2

jQuery - ваша лучшая ставка, это плагин-флажок, например , но их сотни, так что что-то еще может подойти вам лучше. Просто установите Google ' jquery custom checkbox '.