Как мне изменить цвет радио кнопок? - PullRequest
Новая
       59

Как мне изменить цвет радио кнопок?

73 голосов
/ 23 ноября 2010

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

Ответы [ 15 ]

69 голосов
/ 18 января 2016

Быстрым решением было бы наложить стиль ввода переключателя, используя :after, однако, вероятно, лучше создать свой собственный набор инструментов. 

    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
58 голосов
/ 23 ноября 2010

Радиокнопка - это собственный элемент, характерный для каждой ОС / браузера.Невозможно изменить его цвет / стиль, если вы не хотите реализовывать собственные изображения или использовать собственную библиотеку Javascript, которая включает изображения (например, this - кэшированная ссылка )

31 голосов
/ 23 ноября 2010

Только , если вы нацелены на браузеры на основе webkit (Chrome и Safari, возможно, вы разрабатываете Chrome WebApp, кто знает ...), вы можете использовать следующее: 

input[type='radio'] {
   -webkit-appearance: none;
}

А затем стилизуйте его, как если бы это был простой элемент HTML, например, применив фоновое изображение.

Используйте input[type='radio']:active, когда выбран вход, чтобы обеспечить альтернативную графику

Обновление : с 2018 года вы можете добавить следующее для поддержки нескольких поставщиков браузеров: 

input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
28 голосов
/ 19 июля 2016

Как уже упоминал Фред, нет способа встроить радио кнопки в цвет, размер и т. Д. Но вы можете использовать псевдоэлементы CSS, чтобы установить самозванца для любой данной радиокнопки и стилизовать его. Касаясь того, что сказал JamieD, о том, как мы можем использовать псевдоэлемент: after, вы можете использовать и: before, и: after для достижения желаемого вида.

Преимущества этого подхода:

  • Укажите стиль своей радио-кнопки, а также добавьте метку для контента.
  • Измените цвет внешнего обода и / или отмеченный круг на любой понравившийся вам цвет.
  • Придайте ему прозрачный вид с изменениями свойства цвета фона и / или необязательным использованием свойства opacity.
  • Увеличьте размер радиокнопки.
  • При необходимости добавляйте различные свойства тени, например, вставку тени CSS.
  • Смешайте этот простой трюк CSS / HTML с различными Grid-системами, такими как Bootstrap 3.3.6, чтобы он визуально соответствовал остальным компонентам Bootstrap.

Объяснение короткой демонстрации ниже:

  • Установить относительный линейный блок для каждой радиокнопки
  • Скрыть родной смысл переключателя, нет способа напрямую его стилизовать.
  • Стиль и выравнивание метки
  • Перестройка содержимого CSS на псевдоэлементе: before для выполнения двух действий - стилизация внешнего края переключателя и установка элемента на первое место (слева от содержимого метки). Вы можете узнать основные шаги по псевдоэлементам здесь - http://www.w3schools.com/css/css_pseudo_elements.asp
  • Если установлен переключатель, запросите метку для отображения содержимого CSS (выделенная точка в переключателе) впоследствии.

HTML 

<div class="radio-item">
    <input type="radio" id="ritema" name="ritem" value="ropt1">
    <label for="ritema">Option 1</label>
</div>

<div class="radio-item">
    <input type="radio" id="ritemb" name="ritem" value="ropt2">
    <label for="ritemb">Option 2</label>
</div>

CSS 

.radio-item {
  display: inline-block;
  position: relative;
  padding: 0 6px;
  margin: 10px 0 0;
}

.radio-item input[type='radio'] {
  display: none;
}

.radio-item label {
  color: #666;
  font-weight: normal;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 5px 0 0;
  width: 20px;
  height: 20px;
  border-radius: 11px;
  border: 2px solid #004c97;
  background-color: transparent;
}

.radio-item input[type=radio]:checked + label:after {
  border-radius: 11px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 10px;
  content: " ";
  display: block;
  background: #004c97;
}

A короткая демонстрация , чтобы увидеть ее в действии

В заключение, JavaScript, изображения или батареи не требуются. Чистый CSS.

10 голосов
/ 20 января 2015

вы можете использовать этот флажок, как описано в трюках css

http://css -tricks.com / the-checkbox-hack /

рабочий пример радиокнопка:

http://codepen.io/Angelata/pen/Eypnq

input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}

Работает в IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome что угодно.

7 голосов
/ 26 июля 2017

Пользовательские переключатели можно настроить двумя способами:

  1. Путем удаления стандартного внешнего вида с помощью CSS appearance и применения пользовательского внешнего вида. К сожалению, это не работает в IE для рабочего стола (но работает в IE для Windows Phone). Демонстрация: 

    input[type="radio"] {
  /* remove standard background appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
.flex {
  display: flex;
  align-items: center;
}
    <div class="flex">
  <input type="radio" name="radio" id="radio1" />
  <label for="radio1">RadioButton1</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio2" />
  <label for="radio2">RadioButton2</label>
</div>
<div class="flex">
  <input type="radio" name="radio" id="radio3" />
  <label for="radio3">RadioButton3</label>
</div>

  2. Путем скрытия радиокнопки и установки внешнего вида радиокнопки на псевдоселектор label. Кстати, здесь нет необходимости в абсолютном позиционировании (я вижу абсолютное позиционирование в большинстве демонстраций). Демо: 

    *,
*:before,
*:after {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  content: "";
  /* create custom radiobutton appearance */
  display: inline-block;
  width: 25px;
  height: 25px;
  padding: 6px;
  margin-right: 3px;
  /* background-color only for content */
  background-clip: content-box;
  border: 2px solid #bbbbbb;
  background-color: #e7e6e7;
  border-radius: 50%;
}

/* appearance for checked radiobutton */
input[type="radio"]:checked + label:before {
  background-color: #93e026;
}

/* optional styles, I'm using this for centering radiobuttons */
label {
  display: flex;
  align-items: center;
}
    <input type="radio" name="radio" id="radio1" />
<label for="radio1">RadioButton1</label>
<input type="radio" name="radio" id="radio2" />
<label for="radio2">RadioButton2</label>
<input type="radio" name="radio" id="radio3" />
<label for="radio3">RadioButton3</label>
5 голосов
/ 22 августа 2017

простой кросс-браузер пользовательский пример кнопки радио для вас 

.checkbox input{
    display: none;
}
.checkbox input:checked + label{
    color: #16B67F;
}
.checkbox input:checked + label i{
    background-image: url('http://kuzroman.com/images/jswiddler/radio-button.svg');
}
.checkbox label i{
    width: 15px;
    height: 15px;
    display: inline-block;
    background: #fff url('http://kuzroman.com/images/jswiddler/circle.svg') no-repeat 50%;
    background-size: 12px;
    position: relative;
    top: 1px;
    left: -2px;
}
<div class="checkbox">
  <input type="radio" name="sort" value="popularity" id="sort1">
  <label for="sort1">
        <i></i>
        <span>first</span>
    </label>

  <input type="radio" name="sort" value="price" id="sort2">
  <label for="sort2">
        <i></i>
        <span>second</span>
    </label>
</div>

https://jsfiddle.net/kuzroman/ae1b34ay/

4 голосов
/ 02 марта 2013

Хорошо, чтобы создать дополнительные элементы, которые мы можем использовать: after,: before (поэтому нам не нужно сильно менять HTML). Тогда для переключателей и флажков мы можем использовать: проверено. Есть также несколько других псевдоэлементов, которые мы можем использовать (например: hover). Используя их комбинацию, мы можем создать несколько классных пользовательских форм. отметьте это

1 голос
/ 05 сентября 2016

Попробуйте эту CSS с переходом:

enter image description here

Демо 

$DarkBrown: #292321;

$Orange: #CC3300;

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: $DarkBrown;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:$DarkBrown;
}

input[type="radio"]:checked + label span{
     background-color:$Orange;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

HTML: 

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span>Radio Button 1</label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span>Radio Button 2</label>
</div>
1 голос
/ 23 ноября 2010

Как уже говорилось, нет способа добиться этого во всех браузерах, поэтому лучший способ сделать это - использовать ненавязчивый JavaScript.По сути, вы должны превратить вашу радио-кнопку в ссылки (полностью настраиваемые с помощью CSS).каждый щелчок по ссылке будет привязан к соответствующему радиобоксу, переключая его состояние и все остальные.

Страница:
...