Hemos estado buscado en internet y así regalarte la respuesta para tu dilema, si continúas con alguna pregunta déjanos un comentario y respondemos porque estamos para ayudarte.
Solución:
Una solución rápida sería superponer el estilo de entrada del botón de radio usando :aftersin embargo, probablemente sea una mejor práctica crear su propio conjunto 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;
Un botón de opción 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é)
Como mencionó Fred, no hay forma de diseñar de forma nativa los botones de opción en cuanto a color, tamaño, etc. Pero puede usar elementos CSS Pseudo para configurar un impostor de cualquier botón de opción dado y diseñarlo. Tocando lo que dijo JamieD, sobre cómo podemos usar el :después del Pseudoelemento, puede usar tanto :antes como :después para lograr una apariencia deseable.
Beneficios de este enfoque:
- Dale estilo a tu botón de radio y también incluye una etiqueta para el contenido.
- Cambie el color del borde exterior y/o el círculo marcado a cualquier color que desee.
- Dale un aspecto transparente con modificaciones a la propiedad de color de fondo y/o el uso opcional de la propiedad de opacidad.
- Escale el tamaño de su botón de radio.
- Agregue varias propiedades de sombra paralela, como el recuadro de sombra paralela CSS donde sea necesario.
- Combina este simple truco de CSS/HTML en varios sistemas Grid, como Bootstrap 3.3.6, para que coincida visualmente con el resto de los componentes de Bootstrap.
Explicación de la breve demostración a continuación:
- Configure un bloque en línea relativo para cada botón de opción
- Oculte el sentido del botón de radio nativo, no hay forma de diseñarlo directamente.
- Estilo y alineación de la etiqueta
- Reconstruyendo el contenido CSS en :before Pseudo-element 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 pseudoelementos aquí: http://www.w3schools.com/css/css_pseudo_elements.asp
- Si el botón de opción está marcado, solicite una etiqueta para mostrar contenido CSS (el punto con estilo en el botón de opción) después.
el html
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 requiere JavaScript, imágenes o baterías. CSS puro.
Si sostienes algún titubeo o forma de prosperar nuestro escrito te inspiramos escribir un exégesis y con placer lo estudiaremos.