Question

Radio button choice with pictures instead of text

Forms

Updated January 5, 2018

asked on January 3, 2018

Hello,

I'm still learning a lot about HTML. Just wondering if anyone could help me write a sample code to make a radio button choice a picture instead of text. Its for a business card request form and I would love the form to have a sample picture next to the selection. Thanks in advance.

0 0

Answer

SELECTED ANSWER

replied on January 4, 2018 • Show version history

The way I did it was to add CSS to the existing radio buttons and the image as a background image. I've posted an example below with the image url taken out.

#Field45-1 + label {
background-image: url(imageURLhere);
background-size: 100% 100% !important;
background-repeat: no-repeat;
height: 80px !important;
width: 85px !important;
display: inline-block;
color:white;
}

3 0

replied on January 4, 2018

Thanks Alex. I had trouble with Karina's code but I got your's to work and it looks great.

1 0

Replies

replied on January 3, 2018 • Show version history

Hi Lucas,

One way to achieve this is to use JavaScript to insert the HTML for images into the label for each radio button option.

In the below code, the radio button is identified as q18 on the form, and has 3 options (options 0, 1, and 2 in order). Each radio button option has a label, to which an image is being appended. You should have the images hosted where any browser can get to it. The width and height tags are optional. You can choose to set the width and height in these tags or you can use CSS to style the images using the class radiobuttonimage applied below.

$(document).ready(function() {
    
$('label[for="Field18-0"]').append('<img src="http://imageURLhere" width="100px" height="100px" class="radiobuttonimage">');
$('label[for="Field18-1"]').append('<img src="http://imageURLhere" width="100px" height="100px" class="radiobuttonimage">');
$('label[for="Field18-2"]').append('<img src="http://imageURLhere" width="100px" height="100px" class="radiobuttonimage">');  

});

I hope this helps!

3 0

You are not allowed to follow up in this post.

Question

Question

Radio button choice with pictures instead of text

Answer

Replies

Sign in to reply to this post.