Как изменить цвет переключателей?

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

Ответ 1

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

Ответ 2

Быстрое исправление заключалось бы в наложении стиля ввода радиокнопок с помощью :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"/>

Ответ 3

Только если вы нацелены на браузеры на основе 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;
}

Ответ 4

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

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

Разработайте свою радио-кнопку, а также добавьте метку для содержимого.
Измените цвет внешнего обода и/или отмеченный круг на любой понравившийся вам цвет.
Дайте ему прозрачный вид с изменениями свойства фона и/или необязательным использованием свойства непрозрачности.
Масштабируйте размер своей радио кнопки.
При необходимости добавьте различные свойства теней, таких как 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;
}

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

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

Ответ 5

вы можете использовать взломанный флажок, как описано в трюках 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.

Ответ 6

Вы можете настроить настраиваемые радиокнопки двумя способами CSS

Изменив стандартный внешний вид с помощью CSS appearance и применив внешний вид. К сожалению, это не работает в IE for Desktop (но работает в 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>

Ответ 7

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

.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>

Ответ 8

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

Ответ 9

Вам также понадобится javascript. См. здесь, например.

Ответ 10

Это невозможно для встроенного CSS. Вам придется использовать фоновые изображения и некоторые трюки javascript.

Ответ 11

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

Ответ 12

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

Демо

$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>

Ответ 13

Возможно, будет полезно связать радио-кнопку с стилизованной меткой. Дальнейшие подробности в этом ответе.

Ответ 14

Самый разумный способ сделать это - создать отдельный div с высотой и шириной -for example- 50px, а затем радиусом 50px, наложить это на ваши переключатели...

Ответ 15

Простым исправлением будет использование следующего свойства CSS.

input[type=radio]:checked{
    background: \*colour*\;
    border-radius: 15px;
    border: 4px solid #dfdfdf;
}