I am looking to customize the appearance of my radio buttons by using images for both selected and unselected states.
Here is the CSS code I have implemented:
input[type="radio"]
{
background: url("https://example.com/path/to/unselected-image.png") no-repeat;
padding: 0;
display: inline-block;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
vertical-align: middle;
border: 1px solid black;
}
input[type="radio"]:checked
{
background: url("https://example.com/path/to/selected-image.png") no-repeat;
}
However, the current implementation displays a strange border around the radio button and does not update the image properly when clicked. You can see the issue here: http://jsfiddle.net/example
I need this solution to work smoothly across all browsers, including IE7 and IE8. I am open to using jQuery as well if needed.
Edit
I managed to resolve the issue with the following solution:
Include jQuery library:
jQuery code:
// jQuery code goes here
HTML structure:
// HTML structure goes here
CSS styling:
// CSS styling goes here
Thank you!