Tengo un componente con cuatro entradas de radio en un grupo. Uno de ellos está escrito así:
<div className="answer3 col-sm"> <label> <input type="radio" id="answer1" name="answer" value="A" checked={this.state.selectedOption === "A"} onChange={this.onValueChange} /> <img src="./images/answer1.png" alt="answer A" /> </label> </div>El método onChange funciona para actualizar el estado, y registro en la consola el valor de la entrada que está verificada actualmente y muestra el valor correctamente. Tengo un estilo aplicado a los botones de radio que están marcados, básicamente cambiando el borde, y no se está aplicando. El estilo (solo para probar) es como tal:
input[type="radio"]:checked { background-color: rgb(117, 17, 17); }¿Esto se debe a que el atributo "marcado" se agrega dinámicamente, evitando la capacidad de CSS para aplicar estilos de manera adecuada?
no se debe al atributo dinámico 'marcado'. solo intente aplicar el estilo de entrada del botón de opción usando :after de la pseudo clase. Funcionará.
Por lo que puedo ver, su código React parece estar bien ... este es un problema de CSS con el botón de opción y su problema de aceptar un cambio de color de fondo. Lo que se puede hacer con los botones de radio es cambiar el accent-color de lo que recuerdo.
Esto es prácticamente imposible e incluso si pudiera resolver algo, es probable que funcione en algunos navegadores y no en otros.
Pero aún así, creo que puedes probar algo tan simple como el siguiente.
div { margin:10px; } .radio-btn:checked + label { color: blue; } <div> <input type="radio" class="radio-btn" id="1" value="1" name="radbtn"/> <label for="1">Radio Option 1</label><br/> <input type="radio" class="radio-btn" id="2" value="2" name="radbtn"/> <label for="2">Radio Option 2</label><br/> <input type="radio" class="radio-btn" id="3" value="3" name="radbtn"/> <label for="3">Radio Option 3</label> </div>Eche un vistazo y vea si puede funcionar para usted.
¿Puede intentar usar la propiedad de estilo calculado y aplicar estilos en consecuencia? Por ejemplo
<div className="answer3 col-sm"> <label> <input className={value ? 'some-checked-class' : ''} type="radio" id="answer1" name="answer" value={value} checked={this.state.selectedOption === 'A'} onChange={this.onValueChange} /> <img src="./images/answer1.png" alt="answer A" /> </label> </div>