How to border shadow an image when you click on it?

Question

How to border shadow an image when you click on it?

Navigation

#1 by (11 votes)

12

I am making a form to select the type of card at the time of payment and I want that when you 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 class of the CSS is the attributes that I want to add to the image once it is selected

javascript html css3

asked by F Delgado 28.03.2018 в 13:58

source

1 answer

How to make my input text have a separator of thousands and decimals in jquery? Differences between x ++ and ++ x

score 11 · Accepted Answer

You can change the type of input so that, instead of type radio , it is of type checkbox .

In this way, you can associate a label to that checkbox as you were doing using the for attribute and, using the + selector (adjacent elements), refer to the adjacent label and, for consequently, to the image that it has inside.

Finally, you will only have to check if the input is checked by the :checked selector. I use the attribute selector ^= which means that I look for all input that have an id that starts with id_tipo_ .

Your modified example (I simplified it a bit so that the effect could be seen without so much code):

/*--- Formulario Compra ---*/
.formulario-tarjeta .opcion-tarjeta input[type='checkbox']{
    display: none;
}

.formulario-tarjeta .opcion-tarjeta label > img{
    width: 400px;
    height: 300px;
    border-radius: 5.6px;
}

input[id^="id_tipo_"]:checked + label > img{   
    box-shadow: 0px 0px 10px rgba(5,171,168,1);
}

<div class='formulario-tarjeta row'>
   <div class="col-xs-2 opcion-tarjeta">
       <input name="tipo" value="VISA" id="id_tipo_0" required="" type="checkbox" alt="Visa">
       <label for="id_tipo_0">
          <img src="http://images.nationalgeographic.com.es/medio/2015/12/21/bf63ef82rio_narcea_tineo_720x480.jpg" alt="Visa">
       </label>
   </div>
   <div class="col-xs-2 opcion-tarjeta">
       <input name="tipo" value="VISA" id="id_tipo_1" required="" type="checkbox" alt="Visa">
       <label for="id_tipo_1">
          <img src="http://images.nationalgeographic.com.es/medio/2015/12/21/bf63ef82rio_narcea_tineo_720x480.jpg" alt="Visa">
       </label>
   </div>
</div>