Подсветка переключателя с помощью CSS

Question

Я пытался выделить радио-кнопку с помощью CSS, но мне не удалось настроить стиль для работы в FireFox.Я вижу некоторые методы использования изображений для визуализации выделения.Есть ли предпочтительный способ обработки подсветки переключателей в нескольких браузерах?

Пример

<input type="text" style="border-color:#FF0000">
<input type="radio" style="border-color:#FF0000">

Текстовое поле будет иметь рамку красного цвета, но переключатель не будет принимать цвет рамки

Answer 1

Радиокнопки являются элементами управления на уровне ОС и не могут быть стилизованы так, как текстовые поля. Если вы поместите свои переключатели в DIV или что-то еще, вы можете вместо этого применить подсветку к DIV.

Answer 2

Попробуйте это

<style>.imageless-css-3-form-elements label { cursor: hand; cursor: pointer; }

    .imageless-css-3-form-elements label input[type="checkbox"],
    .imageless-css-3-form-elements label input[type="radio"],
    .imageless-css-3-form-elements label input[type="checkbox"] + span,
    .imageless-css-3-form-elements label input[type="radio"] + span,
    .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
    .imageless-css-3-form-elements label input[type="radio"] + span::before
    {
        vertical-align: middle;
    }

    .imageless-css-3-form-elements label input[type="checkbox"],
    .imageless-css-3-form-elements label input[type="radio"]
    {
        position: absolute;
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -webkit-opacity: 0;
        opacity: 0;
    }

    .imageless-css-3-form-elements label input[type="checkbox"] + span,
    .imageless-css-3-form-elements label input[type="radio"] + span,
    .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
    .imageless-css-3-form-elements label input[type="radio"] + span::before
    {
        display: inline-block;
    }

    .imageless-css-3-form-elements label input[type="checkbox"] + span,
    .imageless-css-3-form-elements label input[type="radio"] + span
    {
        font: normal 13px/14px "Segoe UI", Sans-serif;
    }

    .imageless-css-3-form-elements label input[type="checkbox"] + span::before
    {
        content: "\2714";
    }

    .imageless-css-3-form-elements label input[type="checkbox"] + span::before,
    .imageless-css-3-form-elements label input[type="radio"] + span::before
    {
        text-indent: -9999px;
        width: 12px;
        height: 12px;
        font: bold 12px/12px Garamond, "Segoe UI", Sans-serif;
        text-transform: uppercase;
        border: solid 1px #0b70cd;
        border-radius: 3px;
        box-shadow: 0 0 1px 1px #ccc;
        background: #0b70cd;
        background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
        background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
        background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
        background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
        background: linear-gradient(-45deg, #fefefe, #0b70cd);
        margin: 0 4px 0 0;
    }

    .imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
    .imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
    {
        background: #0b70cd;
        background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
        background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
        background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
        background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
        background: linear-gradient(45deg, #fefefe, #0b70cd);
        box-shadow: 0 0 1px 2px #ccc;
    }

    .imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
    .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
    {
        text-indent: 2px;
        color: #fff;
        text-shadow: 0 0 2px #0b70cd;
    }

    .imageless-css-3-form-elements label input[type="radio"] + span::before
    {
        content: "\2022";
        font-size: 22px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
    }

    .imageless-css-3-form-elements label input[type="radio"]:checked + span::before
    {
        text-indent: 2px;
    }

    .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
    .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
    {
        filter: alpha(opacity=50);
        -moz-opacity: .5;
        -webkit-opacity: .5;
        opacity: .5;
    }

    .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
    .imageless-css-3-form-elements label input[type="radio"]:disabled + span,
    .imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
    .imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
    {
        cursor: default;
    }
    </style>
        <h2>Imageless CSS3 Checkboxes</h2>
    <h3>Enabled</h3>
    <ul class="imageless-css-3-form-elements">
        <li><label><input type="checkbox"><span>unchecked</span></label></li>
        <li><label><input type="checkbox" checked="checked"><span>checked</span></label></li>
    </ul>
    <h3>Disabled</h3>
    <ul class="imageless-css-3-form-elements">
        <li><label><input type="checkbox" disabled="disabled"><span>unchecked</span></label></li>
        <li><label><input type="checkbox" checked="checked" disabled="disabled"><span>checked</span></label></li>
    </ul>
    <h2>Imageless CSS3 Radio Buttons</h2>
    <h3>Enabled Group</h3>
    <ul class="imageless-css-3-form-elements">
        <li><label><input type="radio" checked="checked" name="radio-button-group-0"><span>radio</span></label></li>
        <li><label><input type="radio" name="radio-button-group-0"><span>radio</span></label></li>
        <li><label><input type="radio" name="radio-button-group-0"><span>radio</span></label></li>
    </ul>
    <h3>Disabled Group</h3>
    <ul class="imageless-css-3-form-elements">
        <li><label><input type="radio" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li>
        <li><label><input type="radio" checked="checked" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li>
        <li><label><input type="radio" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li>
    </ul>

Answer 3

Uniform - это хорошая библиотека javascript, которая заменяет элементы управления формы графическими версиями, над которыми у вас есть хороший контроль: http://pixelmatrixdesign.com/uniform/. Сама по себе это не новая идея, но элементы управления Uniform, вероятно, являются лучшей попыткой сделать это правильно - они надежны, совместимы с разными браузерами и изящно ухудшаются при необходимости.