Профессиональные флажки без фреймворка

checkbox personnalisation button css apparence

С помощью таблицы стилей CSS и функции JavaScript формы изменяют внешний вид.

Есть множество учебников, показывающих, как улучшить внешний вид флажков, работающих с jQuery, Mootool или другими фреймворками Ajax. Но действительно ли эти фреймворки нужны в данном конкретном случае?

На самом деле это можно сделать только с помощью CSS и JavaScript, используя стандартный элемент формы <button>, а не <checkbox>. А также изображение для изменения внешнего вида флажка.

Показ

Форма

Вы его назначаете ?

Чтобы вставить галочку на страницу, код будет выглядеть следующим образом:

<button type="button" class="prettycb" value="0" onclick="setcbimg(this)"></button>

Обратите внимание, что:

1) Мы используем объект <button>, а не <input>, потому что значение последнего отображается, и это не то, что вы хотите здесь. Для объекта button отображается содержимое между тегом открытия и закрытия.

2) Мы уточняем тип «button», это необходимо для управления атрибутом значения браузерами (согласно нашим тестам).

Код CSS

.prettycb
{
  background:url('uncheck.png');
  background-repeat:no-repeat;
  width:16px;
  height:16px;
  padding:0;
  box-shadow:1px 2x 3px #AAA; 
  -webkit-box-shadow:1px 2px 3px #AAA;	
  border:none;
}

Флажок инициализируется как снятый с изображения uncheck.png. Это недостаток упрощенного кода в том виде, в каком он есть. Его можно удалить с помощью JavaScript-кода, который инициализирует поля для загрузки страницы, изменяя изображение в зависимости от значения 0 или 1 атрибута значения .

Функция JavaScript

function setcbimg(element)
{
  var v = 1 - element.value;
  var z = new Image(); 
  if(v)
    z.src = "check.png"
  else	
    z.src = "uncheck.png"
  element.style.backgroundImage="url(" + z.src + ")";	
  element.value=v;
}

Эта функция вызывается при щелчке флажка, чтобы установить или снять флажок.

Значение, содержащееся в атрибуте значения, инвертируется и в зависимости от нового значения отображается изображение флажка или нет.

Этот принцип позволяет использовать объект формы для сохранения состояния on/off и избегает управления переменными для этого. Это проще развернуть...

Настроить флажки

Чтобы их изменить, достаточно изменить оба изображения.

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

Этот код можно использовать в том виде, в каком он есть, если все флажки изначально сняты, иначе нужно либо добавить CSS-код для предустановленных флажков, либо создать функцию JavaScript для инициализации флажков в зависимости от их состояния.

Избавиться от JavaScript?

Чтобы избавиться от JavaScript, необходимо использовать селекторы атрибутов [type = checkbox] и псевдокласс: checked или второй селектор атрибутов [checked ].
Только это поддерживают далеко не все браузеры.

Загрузка

Ссылка