Улучшенное оформление CSS для флажков

В Интернете существует множество решений для оформления флажков с помощью CSS. Однако если вам нужна большая гибкость и возможность применять разные цвета к отдельным флажкам, рассмотрите следующий подход:

Требование:
Настройте флажки с различными цветами, не создавая множество изображений.

Решение:
Используйте прозрачное изображение PNG с белой внешней поверхностью и частично прозрачным флажком. Примените цвет фона, заданный CSS, к элементу HTML, в результате чего на флажок будет наложен цвет.

Код:
JavaScript:

// Check for checkbox and apply CSS classes
if (inputs[a].type == "checkbox" || inputs[a].type == "radio" && inputs[a].className.search(/^styled/) != -1) {
  span[a] = document.createElement("span");
  span[a].className = inputs[a].type   inputs[a].className.replace(/^styled/, "");
}

CSS:

.checkbox, .radio {
  width: 19px;
  height: 25px;
  padding: 0px;
  background: url(checkbox2.png) no-repeat;
  display: block;
  clear: left;
  float: left;
}

Дополнительный CSS
Определите различные классы цветов и свяжите их с цветами фона.

HTML:

Этот метод использует прозрачность PNG для достижения желаемого эффекта при условии поддержки PNG. При необходимости можно использовать альтернативные методы, например использование слоев CSS с наложением масок GIF.

Пример (jQuery):
https://jsfiddle.net/jtbowden/xP2Ns /