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

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

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

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

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

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

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

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

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

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

• стиль вашего переключателя, а также включить метку для содержание.
• измените цвет внешнего обода и / или проверенный круг на любой цвет, который вам нравится.
• придайте ему прозрачный вид с изменениями свойства цвета фона и / или дополнительным использованием свойства непрозрачности.
• масштабирование размера переключателя.
• добавьте различные свойства тени, такие как CSS drop shadow inset, где это необходимо.
• смешайте этот простой трюк CSS / HTML в различные системы сетки, такие как Bootstrap 3.3.6, поэтому он соответствует остальные компоненты начальной загрузки визуально.

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

• установите относительный встроенный блок для каждого переключателя
• скрыть родной смысл переключателя нет никакого способа, чтобы стиль его непосредственно.
• стиль и выровнять метку
• перестроение содержимого CSS на: перед псевдо-элементом, чтобы сделать 2 вещи-стиль внешнего обода переключателя и установить элемент, чтобы появиться первым (слева от метки содержание.) Вы можете узнать основные шаги по псевдо-элементам здесь -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.

вы можете использовать флажок hack, как описано в CSS tricks

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 что угодно.

вы можете достичь настраиваемых переключателей двумя чистыми способами CSS

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. через скрытие radiobutton и установку пользовательского внешнего вида radiobutton в label'pseudoselector С. Кстати, нет необходимости в абсолютной позиционирование здесь (я вижу абсолютное позиционирование в большинстве демо). Демо:

   *,
   *: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>

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

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

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

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

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

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

попробуйте этот 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>

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