Флажки для стилизации CSS

Хорошо, поэтому я видел множество решений для создания флажков с помощью CSS в Интернете. Тем не менее, я ищу что-то немного более надежное, и мне интересно, может ли кто-нибудь помочь. В принципе, я хочу это решение, но с возможностью иметь цвет с CSS, наложенный на серый. Мне нужно это, потому что у меня будет непредсказуемое количество разных флажков, каждый из которых нуждается в другом цвете, и я не хочу создавать огромное количество разных изображений для обработки этого. У кого-нибудь есть идеи о том, как достичь этого?

Ответы

Ответ 1

Я создал прозрачный png, где внешний цвет белый, а флажок частично прозрачен. Я изменил код, чтобы поместить backgroundColor на элемент, и voila!, раскрашенный флажок.

http://i48.tinypic.com/raz13m.jpg (Он говорит jpg, но это png).

Я бы опубликовал этот пример, но я не знаю, как его показать. Какие-нибудь хорошие сайты для песочницы?

Это, конечно, зависит от поддержки png. Вы могли бы плохо сделать это с помощью gif или наложить полупрозрачный слой css над изображением, как вы и предложили, а затем использовать маску gif для маскировки кровотока из цветной коробки. Этот метод предполагает поддержку прозрачности.

Мой png метод использует css, js со страницы, с которой вы связались, с этими изменениями:

JS:

    // Changed all instances of '== "styled"' to '.search(...)' 
    // to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {

    span[a] = document.createElement("span");

            // Added '+ ...' to this line to handle additional classes on the checkbox
    span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");

CSS

 .checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0px; /* Removed padding to eliminate color bleeding around image
       you could make the image wider on the right to get the padding back */
    background: url(checkbox2.png) no-repeat;
    display: block;
    clear: left;
    float: left;
 }

 .green {
    background-color: green;
 }

 .red {
    background-color: red;
 }

 etc...

HTML:

<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>

Надеюсь, что это имеет смысл.

Edit:

Вот пример jQuery, который иллюстрирует принцип с помощью флажков:

http://jsfiddle.net/jtbowden/xP2Ns/

Ответ 2

Похоже, вы уже это знаете, но решение, с которым вы связаны, фактически заменяет флажок тегом span с изображением, чтобы создать эффект "стилизованного" флажка.

Для большинства браузеров, таких как IE и Firefox, есть несколько (если есть) параметров и очень небольшая поддержка стилей с помощью только CSS.

Ответ 3

Ответ Джеффа на то, как отредактировать указанное решение, верен. Вот реализация его редактирования для решения, если кому-то нужно скопировать и вставить.

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW