Wednesday, October 16, 2013

How to select checked radio button's label using CSS3?


Select checked radio button's label using CSS3:

input[type="radio"]:checked+label{color:red; background-color:green;}

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {background:#F1F1A8;}
input[type="radio"]:checked+label{color:red; background-color:green;}
</style>
</head>
<body>
<div id="mainContainer">
 <input id="radioButton1" type="radio" name="radioButton"><label for="radioButton1">Radio Button1</label></br>
 <input id="radioButton2" type="radio" name="radioButton"><label for="radioButton2">Radio Button2</label></br>
 <input id="radioButton3" type="radio" name="radioButton"><label for="radioButton3">Radio Button3</label></br>
 <input id="radioButton4" type="radio" name="radioButton"><label for="radioButton4">Radio Button4</label></br>
 <input id="radioButton5" type="radio" name="radioButton"><label for="radioButton5">Radio Button5</label></br>
</div>
</body>
</html>

Sample Output:


How to select checked radio button's label using CSS3


Demo:



0 comments:

Post a Comment

Subscribe via Email