2

estoy intentando aplicar estilo CSSa unos radiobutton. Quiero que cuando este input esté checked la etiqueta labelse ponga de color verde. Sin embargo con el código que yo utilizo se ponen verde las posteriores, y no la que he pulsado ni las anteriores.

.posicionesDeportes label{cursor: pointer;}
.posicionesDeportes input{display: none;}
.posicionesDeportes label:hover {color: #ecc300;}
.radio-custom:checked ~ label  {color:green;}
<div class="posicionesDeportes col-md-3 form-group">
   <span class="selectPos1">Equipo A</span><br>
   <label class="fas fa-futbol" for="porteroA">Portero</label>
   <input id="porteroA" class="radio-custom" type="radio" name="equipo" value="porteroA" required><br>
   <label class="fas fa-futbol" for="centralA">Central</label>
   <input id="centralA" class="radio-custom" type="radio" name="equipo" value="centralA"><br>
   <label class="fas fa-futbol" for="alaIzqA">Ala izquierda</label>
   <input id="alaIzqA" class="radio-custom" type="radio" name="equipo" value="alaIzqA"><br>
   <label class="fas fa-futbol" for="alaDerA">Ala derecha</label>
   <input id="alaDerA" class="radio-custom" type="radio" name="equipo" value="alaDerA"><br>
   <label class="fas fa-futbol" for="pivotA">Pívot</label>
   <input id="pivotA" class="radio-custom" type="radio" name="equipo" value="pivotA"><br>
</div>

1 respuesta 1

3

Lo que te está pasando es con la regla .radio-custom:checked ~ label {color:green;} estás diciendo que tome cualquier hermano (hermano posterior, en CSS no podemos seleccionar elementos anteriores en el DOM) de un elemento .radio-custom que esté seleccionado y que sea <label>, para colocarle el color verde.

¿Qué es lo que ocurre? Que en tu HTML cualquier <label> posterior al .radio-custom que pulses, cumple con esta regla, volviéndose verde.

Una manera de solucionarlo es metiendo cada pareja de .radio-custom + <label> dentro de un contenedor, para afectar solamente al que nos interesa. Esto seguiría sin darnos la solución, ya que el <label> al que queremos afectar se encuentra antes del <input> que lo cambia. Con intercambiar sus posiciones te bastaría.

.posicionesDeportes label{cursor: pointer;}
.posicionesDeportes input{display: none;}
.posicionesDeportes label:hover {color: #ecc300;}
.radio-custom:checked + label  {color:green;}
<div class="posicionesDeportes col-md-3 form-group">
  <span class="selectPos1">Equipo A</span><br>
  <div class="grupo-radio">
    <input id="porteroA" class="radio-custom" type="radio" name="equipo" value="porteroA" required>
    <label class="fas fa-futbol" for="porteroA">Portero</label>
  </div>
  <div class="grupo-radio">
    <input id="centralA" class="radio-custom" type="radio" name="equipo" value="centralA">
    <label class="fas fa-futbol" for="centralA">Central</label>
  <div>
  <div class="grupo-radio">
    <input id="alaIzqA" class="radio-custom" type="radio" name="equipo" value="alaIzqA">
    <label class="fas fa-futbol" for="alaIzqA">Ala izquierda</label>
  </div>
  <div class="grupo-radio">
    <input id="alaDerA" class="radio-custom" type="radio" name="equipo" value="alaDerA">
    <label class="fas fa-futbol" for="alaDerA">Ala derecha</label>
  </div>
  <div class="grupo-radio">
    <input id="pivotA" class="radio-custom" type="radio" name="equipo" value="pivotA">
    <label class="fas fa-futbol" for="pivotA">Pívot</label>
  </div>
</div>

Como añadido, eliminé los <br>. Hay que evitarlos en la medida de lo posible y teniéndolos dentro de <div> no habría problema con el salto de línea.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.