Create a border around image when active/clicked

Question

I want to let my website visitors select from 3 different images and what I want now is a border around the image when they selected, so basically when it's active.

I hope it's understandable what I am looking for. Can someone help me perhaps with that?

I've tried to find something on Google but had no luck.

Answer 1

This option is suitable?

input{
    display: none;
}

label{
    display: inline-block;
    width: 100px;
    height: 100px;    
    position: relative;
    border: 4px solid transparent;
}
input:checked + label{
    border: 4px solid #f00;     
}

<input type="radio" id="r1" name="radio" />
<label for="r1">
    <img src="http://www.auto.az/forum/uploads/profile/photo-thumb-1.jpg?_r=1431896518" alt="" />
</label>

<input type="radio" id="r2" name="radio" />
<label for="r2">
    <img src="http://www.auto.az/forum/uploads/profile/photo-thumb-1.jpg?_r=1431896518" alt="" />
</label>

<input type="radio" id="r3" name="radio" />
<label for="r3">
    <img src="http://www.auto.az/forum/uploads/profile/photo-thumb-1.jpg?_r=1431896518" alt="" />
</label>

Answer 2

This will solve your problem.....and i am assuming that 'image_class' is the css class for your images.

     $('.image_class').click(function() {  
     $('.image_class').css("border","none");    
     // this border from other  image   
$(this).css("border","1px solid grey");  
// add border to clicked image });

Answer 3

One way is to use some jQuery to add a border style to the image being clicked.

<div>
    <img src="http://placehold.it/400x200" />
</div>

$('img').click(function () {
    $(this).css('border','1px solid black');
});

See the JSfiddle