yo uso boostrap 5
Tengo un botón de radio. Cuando hago clic en uno, me gustaría mostrar que está seleccionado.
<div class="row"> <div class="col-sm-6"> <div class="answer"> <input value="single" type="radio" class="hiddenRadio"> <img src="/img/ski.png" class="card-img-top"> <label>Ski</label> </div> </div> <div class="col-sm-6"> <div class="answer"> <input value="single" type="radio" class="hiddenRadio"> <img src="/img/kayak.png" class="card-img-top"> <label>Kayak</label> </div> </div> </div>Para ocultar el botón de opción (círculo) en mi archivo css puse
.hiddenRadio{ position: fixed; opacity: 0; pointer-events: none; }Al hacer clic en el evento para la clase de respuesta, intenté asignar un valor al color del borde, pero eso no tuvo ningún efecto.
No puede usar eventos de puntero: ninguno; Mírelo, se usa cuando no desea tener ningún evento, pero en este caso necesita un evento de clic. Elimine eso y use :checked ~ img , o si desea que el texto se delinee, vaya con .hiddenRadio:checked ~ label
.hiddenRadio{ position: fixed; opacity: 0; } .hiddenRadio:checked ~ img { border: 2px solid red; } <div class="row"> <div class="col-sm-6"> <div class="answer"> <input value="single" type="radio" class="hiddenRadio"> <img src="/img/ski.png" class="card-img-top"> <label>Ski</label> </div> </div> <div class="col-sm-6"> <div class="answer"> <input value="single" type="radio" class="hiddenRadio"> <img src="/img/kayak.png" class="card-img-top"> <label>Kayak</label> </div> </div> </div>