Estoy tratando de que cuando se selecciona un botón de radio, cambie su radio a color azul. Pero no puedo. Este es mi código CSS:

/* Estilo Radio Button */
.radio {
    padding-left: 25px; 
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 0px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: #ddd !important;
    outline: 0 !important;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

.radio label:hover:before {
    border-color: rgba(82, 168, 236, 0.8) !important;
    outline: 0 !important;
    outline: thin dotted \9 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 
}

.radio input[type="radio"] {
    opacity: 0; 
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; 
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -o-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65; 
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed; 
}

.radio.radio-inline {
    margin-top: 0; 
}

.radio-primary input[type="radio"] + label::after {
    background-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; 
}


.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f; 
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; 
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e; 
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; 
}

Si cambio esto:

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    //HERE!!!
    border-color: blue !important;
    outline: 0 !important;
    background-color: blue;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

Cambia todos los bordes de los botones de radio. Solo soy lo que marcó el botón de radio. ¿Cómo podría hacer esto?. Gracias.

css
1
JuMoGar 4 may. 2017 a las 21:27

3 respuestas

La mejor respuesta

Según su CSS y el código que Roko creó, creo que solo necesita esta nueva regla. Tiene reglas como esta, pero solo se aplican a los controles con una clase en particular. !important es necesario porque su regla para .radio label::before tiene un estilo !important para border-color

.radio input[type="radio"]:checked + label::before {
    border-color: blue !important;
}
1
Joseph Marikle 4 may. 2017 a las 18:50

No puede cambiar el estilo del botón de opción, ya que es un elemento del navegador nativo.

¿Cómo cambio el color de los botones de radio?

Puede intentar superponer un pseudo elemento como lo estaba haciendo con la etiqueta. Pero solo otro botón de radio con un índice z más alto

-1
Community 23 may. 2017 a las 11:47

No hay nada malo con el código que publicaste.
Si no puede lograr que el estado :checked funcione, solo significa que le faltan los atributos id="" y la etiqueta for="".

Esta demostración parece sh * t pero es tu CSS lo que necesitas para aumentar

/* Estilo Radio Button */
.radio {
    padding-left: 25px; 
}

.radio label {
    display: inline-block;
    position: relative;
    padding-left: 0px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    border-color: #ddd !important;
    outline: 0 !important;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out; 
}

.radio label:hover:before {
    border-color: rgba(82, 168, 236, 0.8) !important;
    outline: 0 !important;
    outline: thin dotted \9 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); 
}

.radio input[type="radio"] {
    opacity: 0; 
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px; 
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(0.75, 0.75);
    -ms-transform: scale(0.75, 0.75);
    -o-transform: scale(0.75, 0.75);
    transform: scale(0.75, 0.75);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65; 
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed; 
}

.radio.radio-inline {
    margin-top: 0; 
}

.radio-primary input[type="radio"] + label::after {
    background-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #428bca; 
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #428bca; 
}


.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f; 
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f; 
}

.radio-info input[type="radio"] + label::after {
    background-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #5bc0de; 
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #5bc0de; 
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e; 
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e; 
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c; 
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c; 
}
<span class="radio">
  <input type="radio" id="r1" name="r">
  <label for="r1"></label>
</span>

<span class="radio">
  <input type="radio" id="r2" name="r">
  <label for="r2"></label>
</span>
0
Roko C. Buljan 4 may. 2017 a las 18:42