Как изменить стиль границ флажка в CSS?
Как я могу изменить флажок (вход) стиль границы? Я поместил border:1px solid #1e5180 на него, но в FireFox 3.5, ничего не происходит!
6 ответов
Если что-то случится в любом браузере, я буду удивлен. Это один из тех выдающихся элементов формы, которые браузеры, как правило, не позволяют вам сильно стилизовать, и которые люди обычно пытаются заменить на javascript, чтобы они могли стилизовать / кодировать что-то, чтобы выглядеть и действовать как флажок.
Вот пример: prettyCheckboxes .
Для Firefox, Chrome и Safari ничего не происходит.
Для IE граница применяется за пределами флажка (не как часть флажка), и «причудливый» эффект затенения в флажке исчезает (отображается как старый флажок).
Для Opera стиль границы фактически применяет границу к элементу флажка. Самое простое решение — завернуть флажок внутрь
Opera также обрабатывает другие стили на флажке лучше, чем другие браузеры: color применяется как цвет галочки, background-color применяется как цвет фона внутри флажка (IE применяет фон, как если бы флажок находился внутри Вывод
Если вы хотите полностью контролировать внешний вид, вам придется использовать расширенный подход к изображению / javascript, также подразумеваемый другими.
Флажки для стилей (и многие другие элементы ввода для этого материала) на самом деле невозможно с чистым CSS, если вы хотите кардинально изменить внешний вид.
Лучше всего реализовать что-то вроде jqTransform , которое фактически заменяет вводимые вами данные изображениями и применяет к нему поведение javascript, чтобы имитировать флажок (или другой элемент, если на то пошло)
{{1 }}<div style="border-style: solid;width:13px">
<input type="checkbox" name="mycheck" style="margin:0;padding:0;">
</input>
</div>
Вы должны использовать
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
Затем вы избавитесь от изображения / стиля флажка по умолчанию и можете стилизовать его. В любом случае граница останется в Firefox