I am making a form to select the type of card when paying and I want that when they select the image of the type of card it is marked with a shading around it.
my template is:
<form>
...
<div class='formulario-tarjeta' class='row'>
<div class="form-group row">
<div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="VISA" id="id_tipo_0" required="" type="radio" alt="Visa"><label for="id_tipo_0"><img src="{% static '/img/tarjetas/visa.png' %}" alt="Visa"></label></div>
<div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="VISA_DEBIT" id="id_tipo_1" required="" type="radio"><label for="id_tipo_1"><img src="{% static '/img/tarjetas/visa-electron.png' %}" alt="Visa Electrón"></label></div>
<div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="DINERS" id="id_tipo_2" required="" type="radio"><label for="id_tipo_2"><img src="{% static '/img/tarjetas/dinners-club.png' %}" alt="Dinner Club"></label></div>
<div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="AMEX" id="id_tipo_3" required="" type="radio"><label for="id_tipo_3"><img src="{% static '/img/tarjetas/amex.png' %}" alt="American Express"></label></div>
<div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="CODENSA" id="id_tipo_4" required="" type="radio"><label for="id_tipo_4"><img src="{% static '/img/tarjetas/codensa.png' %}" alt="Codensa"></label></div>
<div class="col-xs-2 opcion-tarjeta"><input name="tipo" value="MASTERCARD" id="id_tipo_5" required="" type="radio"><label for="id_tipo_5"><img src="{% static '/img/tarjetas/mastercard.png' %}" alt="MasterCard"></label></div>
</div>
...
</form>
and this my css:
/*--- Formulario Compra ---*/
.formulario-tarjeta .opcion-tarjeta input[type='radio']{
display: none;
}
.formulario-tarjeta .opcion-tarjeta label > img{
border-radius: 5.6px;
box-shadow: 0px 0px 10px rgba(5,171,168,1);
}
The second CSS class is the attributes that I want to add to the image once it is selected.
You can change the type of
input
so that instead of typeradio
, it is of typecheckbox
.In this way, you can associate one
label
to said checkbox just as you were doing through the attributefor
and, through the selector+
(adjacent elements), refer to the adjacent label and, consequently, to the image it has inside.Finally, you only have to check if the input is checked using the selector
:checked
. I use the attribute selector^=
which means find allinput
that have an id that starts withid_tipo_
.Your modified example (I've simplified it a bit so you can see the effect without so much code):