Флажки для стилизации CSS
Хорошо, поэтому я видел множество решений для создания флажков с помощью CSS в Интернете. Тем не менее, я ищу что-то немного более надежное, и мне интересно, может ли кто-нибудь помочь. В принципе, я хочу иметь это решение , но с возможностью иметь цвет с CSS, накладывающийся на серый флажок. Мне нужно это, потому что у меня будет непредсказуемое количество разных флажков, каждый из которых нуждается в другом цвете, и я не хочу создавать огромное количество разных изображений для обработки этого. У кого-нибудь есть идеи о том, как этого добиться?
- Почему .foo a: link, .foo a: visited {} селектор переопределяет: hover, a: active {} селектор в CSS?
- Угловой 2: Как стиль элемента хоста компонента?
- Как сделать раскрывающееся меню Twitter Bootstrap, а не щелчком
- Как нарисовать трапецию / трапецию с css3?
- Почему размер windows меньше ширины видового экрана, заданного в медиа-запросах
- @Media min-width & max-width
- Есть ли способ настроить управление диапазоном HTML5?
- Почему не влияет процентная нагрузка / маржа на элементы Flex в Firefox и Edge?
Я создал прозрачный 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, который иллюстрирует принцип с помощью флажков:
Похоже, вы уже это знаете, но решение, с которым вы связаны, фактически заменяет флажок тегом span с изображением, чтобы создать эффект «стилизованного» флажка.
Для большинства браузеров, таких как IE и Firefox, есть несколько (если есть) вариантов и очень небольшая поддержка стилей с помощью только CSS.
Ответ Джеффа на то, как отредактировать указанное решение, является правильным. Вот реализация его редактирования для решения, если кому-то нужно скопировать и вставить.
JavaScript http://pastebin.com/WFdKwdCt
Я нашел http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ решение javascript + css, которое работает на win, т.е. win и mac: chrome, safari, firefox, opera. iOS Safari и хром.