Quiero decir, un botón de radio en sí 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. ¿Esto se puede hacer usando CSS?¿Cómo cambio el color de los botones de radio?
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 utilizar una biblioteca Javascript personalizada que incluya imágenes (por ejemplo, this - cached link)
También necesitará un javascript. Ver here por ejemplo.
Esto no es posible con CSS nativo. Tendrás que usar imágenes de fondo y algunos trucos de JavaScript.
Sólo si se dirigen a los navegadores basados en WebKit (Chrome y Safari, tal vez usted está desarrollando una aplicación web Chrome, quién sabe ...), se puede utilizar el siguiente:
input[type='radio'] {
-webkit-appearance: none;
}
Y luego estilo como si fuera un simple elemento HTML, por ejemplo, la aplicación de una imagen de fondo.
Uso input[type='radio']:active para cuando se selecciona la entrada, para proporcionar los gráficos alternativos
Como otro dijo, no hay manera de lograr esto en todos los navegadores, por lo que mejor manera de hacerlo es usando javascript crossbrowser discretamente. Básicamente tienes que convertir tu radiobutton en enlaces (totalmente personalizables a través de CSS). cada clic en el enlace se vinculará a la radio correspondiente, alternar su estado y todos los demás.
Bien para crear elementos adicionales que 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 podemos usar también (como: flotar). Usando una mezcla de estos podemos crear algunas formas personalizadas muy interesantes. check this
se puede utilizar la casilla Hack como se explica en trucos css
http://css-tricks.com/the-checkbox-hack/
ejemplo de botón de radio de trabajo:
http://codepen.io/Angelata/pen/Eypnq
input[type=radio]:checked ~ .check {}
input[type=radio]:checked ~ .check .inside{}
Obras en IE9 +, Firefox 3.5 + , Safari 1.3+, Opera 6+, Chrome cualquier cosa.
Puede ser útil vincular el botón de opción con la etiqueta de estilo. Detalles adicionales en this answer.
Una solución rápida sería superponer el estilo de entrada del botón de opción con :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"/>Esto funcionó bien para mí. Gran solución cuando no desea agregar elementos adicionales o usar imágenes. – Swen
Desafortunadamente, solo funciona en Chrome. :( –
En general, los navegadores aceptan el estilo ": after" solo para los elementos del contenedor, tal como se define en W3C. La entrada no es un contenedor y, por lo tanto, generalmente no es compatible después del diseño. Https://www.w3.org/TR/CSS2/ generate.html # before-after-content – Ina
Como Fred mencionó, no hay manera de botones de radio nativa de estilo en cuanto a color, tamaño, ETCC. Pero puede usar CSS Pseudoelementos para configurar un impostor de cualquier botón de opción y darle un estilo.Tocando lo que dijo JamieD, sobre cómo podemos usar el: después del elemento Pseudo, puedes usar ambos: antes y después para lograr un aspecto deseable.
beneficios de este enfoque:
Explicación de corta demostración a continuación:
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 rápida Demo a verlo en acción
En conclusión, sin JavaScript, imágenes o baterías requeridas. Pure CSS.
Esta técnica funcionó para mí en Chrome (60.0.3112.90). Lo probé en Microsoft Edge (38.14393.1066.0) y Firefox (54.0.1, 32-bit) también. – markreyes
Prueba esto css con la transició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>
Puede alcanzar los botones de radio personalizadas de dos formas puras CSS
Mediante la eliminación de la apariencia estándar con CSS appearance y la aplicación de apariencia personalizada. Lamentablemente, esto no funciona en IE for Desktop (pero funciona en IE para Windows Phone).Demostració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>Via ocultar botón de radio y configurar el aspecto del botón de radio personalizada a label 's pseudoselector. Por cierto, no es necesario un posicionamiento absoluto aquí (veo un posicionamiento absoluto en la mayoría de las demos). Demostració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>ejemplo sencillo botón de radio personalizada del navegador cruz por ti
.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>
¿Sigue siendo así? – zehelvion
Creo que sí. Ningún navegador que conozca presenta una forma de configurar el aspecto de los botones de opción, tendrá que usar una biblioteca JS para lograr esto. – Fred
O use CSS pero necesita la imagen como usted dijo. Esto es un poco extraño – zehelvion