¿Cómo cambio el color de los botones de opción?

Quiero decir, un botón de radio en sí mismo consiste en una forma redonda y un punto en el centro (cuando se selecciona el botón). Lo que quiero cambiar es el color de ambos. ¿Se puede hacer esto usando CSS?

Un botón de radio es un elemento nativo específico de cada SO / navegador. No hay forma de cambiar su color / estilo, a menos que desee implementar imágenes personalizadas o usar una biblioteca Javascript personalizada que incluya imágenes (por ejemplo, este : enlace en caché )

Una solución rápida sería superponer el estilo de entrada del botón de :afteropción, sin embargo, probablemente sea una mejor práctica crear su propio kit de herramientas personalizado.

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

Como mencionó Fred, no hay forma de diseñar de forma nativa los botones de opción con respecto al color, tamaño, etc. Pero puede usar pseudoelementos CSS para configurar un impostor de cualquier botón de opción dado y darle estilo. Tocando lo que dijo JamieD, sobre cómo podemos usar el elemento: after Pseudo, puedes usar ambos: before y: after para lograr un aspecto deseable.

Beneficios de este enfoque:

• Diseñe su botón de radio y también incluya una etiqueta para el contenido.
• Cambie el color del borde exterior y / o el círculo marcado a cualquier color que desee.
• Déle un aspecto transparente con modificaciones a la propiedad de color de fondo y / o uso opcional de la propiedad de opacidad.
• Escale el tamaño de su botón de opción.
• Agregue varias propiedades de sombra paralela, como inserción de sombra paralela CSS, donde sea necesario.
• Combine este sencillo truco de CSS / HTML en varios sistemas Grid, como Bootstrap 3.3.6, para que coincida visualmente con el resto de sus componentes de Bootstrap.

Explicación de la breve demostración a continuación:

• Configurar un bloque en línea relativo para cada botón de opción
• Oculte el sentido del botón de opción nativo, no hay forma de diseñarlo directamente.
• Aplicar estilo y alinear la etiqueta
• Reconstruir el contenido CSS en: antes del pseudo-elemento para hacer 2 cosas: diseñar el borde exterior del botón de opción y configurar el elemento para que aparezca primero (a la izquierda del contenido de la etiqueta). Puede aprender los pasos básicos sobre los pseudoelementos aquí: http://www.w3schools.com/css/css_pseudo_elements.asp
• Si el botón de opción está marcado, solicite que la etiqueta muestre el contenido CSS (el punto con estilo en el botón de opción) después.

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

El 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;
}

Una breve demostración para verlo en acción

En conclusión, no se requieren JavaScript, imágenes o baterías. CSS puro.

Solo si está apuntando a navegadores basados ​​en webkit (Chrome y Safari, tal vez esté desarrollando una aplicación web de Chrome, quién sabe ...), puede usar lo siguiente:

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

Y luego modifíquelo como si fuera un simple elemento HTML, por ejemplo, aplicando una imagen de fondo.

Úselo input[type='radio']:activecuando se selecciona la entrada, para proporcionar gráficos alternativos

Actualización : a partir de 2018, puede agregar lo siguiente para admitir varios proveedores de navegadores:

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

Puede lograr botones de opción personalizados en dos formas de CSS puro

1. Mediante la eliminación de la apariencia estándar mediante CSS appearancey la aplicación de una apariencia personalizada. Desafortunadamente, esto no funciona en IE para escritorio (pero funciona en IE para Windows Phone). Manifestación:

   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>

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

2. A través de ocultar el botón de radio y configurar la apariencia personalizada del botón de radio en labelel pseudoelector. Por cierto, no es necesario un posicionamiento absoluto aquí (veo un posicionamiento absoluto en la mayoría de las demostraciones). Manifestación:

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

   Ejecutar fragmento de códigoOcultar resultados

   Expandir fragmento

puede usar el truco de casilla de verificación como se explica en trucos css

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

ejemplo de trabajo de botón de radio:

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

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

Funciona en IE9 +, Firefox 3.5+, Safari 1.3+, Opera 6+, Chrome cualquier cosa.

ejemplo simple de botón de opción personalizado de navegador cruzado para usted

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

Bueno, para crear elementos adicionales podemos usar: after,: before (para que no tengamos que cambiar tanto el HTML). Luego, para los botones de opción y las casillas de verificación, podemos usar: marcado. Hay algunos otros pseudo elementos que también podemos usar (como: hover). Usando una mezcla de estos, podemos crear algunos formularios personalizados muy interesantes. Mira esto

Prueba este CSS con transición:

Manifestación

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

Construí otra bifurcación de la muestra de código de @ klewis para demostrar algo de juego con css puro y degradados usando: before /: after pseudoelementos y un botón de entrada de radio oculto.

HTML:

sample radio buttons:
<div style="background:lightgrey;">
    <span class="radio-item">
        <input type="radio" id="ritema" name="ritem" class="true" value="ropt1" checked="checked">
        <label for="ritema">True</label>
    </span>

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

:

CSS:

.radio-item input[type='radio'] {
    visibility: hidden;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0;
}
    .radio-item input[type=radio]:before {
        position: relative;
        margin: 4px -25px -4px 0;
        display: inline-block;
        visibility: visible;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        border: 2px inset rgba(150,150,150,0.75);
        background: radial-gradient(ellipse at top left, rgb(255,255,255) 0%, rgb(250,250,250) 5%, rgb(230,230,230) 95%, rgb(225,225,225) 100%);
        content: "";
    }
        .radio-item input[type=radio]:checked:after {
            position: relative;
            top: 0;
            left: 9px;
            display: inline-block;
            visibility: visible;
            border-radius: 6px;
            width: 12px;
            height: 12px;
            background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            content: "";
        }
            .radio-item input[type=radio].true:checked:after {
                background: radial-gradient(ellipse at top left, rgb(245,255,200) 0%, rgb(225,250,100) 5%, rgb(75,175,0) 95%, rgb(25,100,0) 100%);
            }
            .radio-item input[type=radio].false:checked:after {
                background: radial-gradient(ellipse at top left, rgb(255,225,200) 0%, rgb(250,200,150) 5%, rgb(200,25,0) 95%, rgb(100,25,0) 100%);
            }
.radio-item label {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}

vista previa: https://www.codeply.com/p/y47T4ylfib

Esto no es posible con CSS nativo. Tendrás que usar imágenes de fondo y algunos trucos de JavaScript.

Como dijeron otros, no hay forma de lograr esto en todos los navegadores, por lo que la mejor manera de hacerlo es usar javascript discretamente. Básicamente, tienes que convertir tu botón de radio en enlaces (totalmente personalizables a través de CSS). cada clic en el enlace estará vinculado a la radiobox relacionada, alternando su estado y todos los demás.

Puede resultar útil vincular el botón de opción a la etiqueta con estilo. Más detalles en esta respuesta .

Una forma inteligente de hacerlo sería crear un div separado con una altura y un ancho de -por ejemplo- 50px y luego un radio de 50px colocar esto sobre sus botones de radio ...

Puede incrustar un elemento de tramo en la entrada de radio y luego seleccionar un color de su elección para que se renderice cuando se marca una entrada de radio. Consulte el siguiente ejemplo procedente de w3schools.

<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
</style>
<body>

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

</body>

Cambiar el color de fondo en este segmento de código a continuación funciona.

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #00a80e;
}

Procedente de cómo crear un botón de opción personalizado

Una solución simple sería utilizar la siguiente propiedad CSS.

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