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

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

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

http://sofru.miximages.com/css/raz13m.png (Он говорит 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:

 

(green)

(red)

(purple)

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

Редактировать:

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

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

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

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

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

JavaScript http://pastebin.com/WFdKwdCt

CSS http://pastebin.com/TM1WwSQW

Я нашел http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ решение javascript + css, которое работает на win, т.е. win и mac: chrome, safari, firefox, opera. iOS Safari и хром.

  • Обнаружение, если используется браузер на мобильном устройстве (iOS / Android phone / tablet)
  • проверьте, отображается ли элемент: нет или блокируется при щелчке. Jquery
  • Как стилизовать поле подтверждения по умолчанию с помощью только css?
  • Соответствие пустого поля ввода с помощью CSS
  • Как заставить Google Fonts работать в IE?
  • CSS: установить фоновое изображение с непрозрачностью?
  • Как удалить границу (контур) вокруг полей ввода текста / ввода? (Chrome)
  • Получить * все * атрибуты CSS с помощью jQuery
  • Как предотвратить изменение текста текста Webkit во время перехода CSS
  • Размер шрифта <12px не действует в Google Chrome
  • Как использовать JSF сгенерированный идентификатор HTML-элемента с двоеточием «:» в селекторах CSS?
  • Interesting Posts

    Ошибка загрузки PXE на предустановленную GRUB без сообщения об ошибке

    Почему устаревшие / ошибки метода AngularJS $ http не рекомендуются? Удалено из v1.6?

    Android listview с кнопками верхнего и нижнего колонтитула

    В чем разница между оператором dot (.) И -> в C ++?

    Когда вы экспортируете документ в формате pdf в Word 2010, какая разница между публикацией стандартного и минимального размера?

    Правило Outlook для * не * отображение уведомления для определенных сообщений

    Доступ к Интернету не работает в Virtual PC

    Динамическая компоновка WPF с элементами управления и сеткой

    Выбор случайного объекта в NSArray

    Отключить масштабирование колесика мыши с помощью встроенных карт Google

    Внутренний беспроводной адаптер не работает после перемещения ноутбука

    Джерси 415 Неподдерживаемый тип материала

    Использование переменных для свойств CSS в Sass

    Как я могу получить расположение файловой системы сценария PowerShell?

    Постоянный туннель

    Давайте будем гением компьютера.