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

Solución:

Una solución rápida sería superponer el estilo de entrada del botón de radio usando :after, 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"/>

Un botón de radio es un elemento nativo específico de cada sistema operativo / 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é)

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 opción 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 en 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 CSS / HTML en varios sistemas Grid, como Bootstrap 3.3.6, para que coincida visualmente con el resto de sus componentes 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 darle estilo directamente.
• Aplicar estilo y alinear la etiqueta
• Reconstruir el contenido CSS en el: antes del pseudo-elemento para hacer 2 cosas: diseñar el borde exterior del botón de radio 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.

---

---

Utiliza Nuestro Buscador