Флажки CSS Styling

Question

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

Answer 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> 

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

Edit:

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

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

Answer 2

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

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

Answer 3

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

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Answer 4

Я нашел http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Javascript решение + CSS вот работает на победу то есть выиграть и макинтош: хром, Safari, Firefox, опера. iOS Safari и хром.