How to use HTML radio button with image and text
In this post we are learning about how to use image as radio button in html. In this example, the radio button is hidden and the label acts as a container for the image. The CSS code styles the border of the image to appear blue when the radio button is selected.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
input[type="radio"] {
display: none;
}
label {
display: inline-block;
}
input[type="radio"] + label img {
border: 2px solid transparent;
}
input[type="radio"]:checked + label img {
border: 2px solid blue;
}
</style>
</head>
<body>
<input type="radio" id="image-option-1" name="image-options" value="option-1">
<label for="image-option-1">
<img src="option-1-image.jpg" alt="Option 1">Images Here
</label>
</body>
</html>
The above code help to use images instead of radio buttons. In this code first you need to hide the radio buttons and the <img> tag used in <label> tag. If you want to add text with images the add text after <img> tag.
FAQ
Qusetion1: Can we add image to radio button?
Answer: Yes, the above code help to create this functionality.
Qusetion2: Which property helps you to add an image on the radio button control?
Answer: The Checked property of the radio button is used to set the state of a radio button.
Qusetion3: How to add icon to radio button in HTML?
Answer: Yes, the above code help to create this functionality.
Qusetion4: How to add icon to radio button in HTML?
Answer: The alt property allows an image link to show a text label.
Qusetion5: Which attribute is used to place an image?
Answer: The src attribute is required, and contains the path to the image you want to embed.
Please do not entering spam link in the comment box ConversionConversion EmoticonEmoticon