Styling radio buttons and only show selected
Question
'm currently working on a project, there are two options and I am wanting to have a pointing finger image rather than the standard radio button, as well as this I was wondering if it would be possible to only show the radio image for the one that is selected only.
I have tried using a js library but can't seem to get it to work
Current code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.screwdefaultbuttonsV2.min.js" ></script>
<script type="text/javascript">
$('input:radio').screwDefaultButtons({
image: "url(images/hand.png)",
width: 39,
height: 17
});
</script>
</head>
<body>
<div id="content">
<label for="LiquoriceandPeppermint" class="check">Liquorice and Peppermint<input type="radio" name="flavour" id="LiquoriceandPeppermint" value="option1" /></label><br>
<label for="RooibusCremeCaramel " class="check">Rooibus Crème Caramel <input type="radio" name="flavour" id="RooibusCremeCaramel " value="option2" /></label>
</div>
</body>
</html>
Thanks
3 answers
solution1
0 2013-02-28 15:50:09
Radio buttons are rendered by the OS, not the browser. Styling them has always been limited and non standardized across browsers. You're better off trying to style the label to accomplish what you want.
solution2
0 2013-03-01 05:53:01
try css:
input[type='radio']:checked {
background: url("images/hand.png") center center no-repeat;
opacity: 0;
}
solution3
0 2013-03-01 07:40:16
This can create completly custom radio buttons. Even different icons...
input[type="radio"] {
display:none;
vertical-align: middle;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content: '';
display:inline-block;
width: 25px;
height: 25px;
border: 2px solid black;
}
input[type="radio"][class="customRadio"] + label:before {
background: url('../icons/bc.png') no-repeat;
}
input[type="radio"][class="customRadio"]:checked + label:before {
background: url('../icons/bc1.png') no-repeat;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.