<!DOCTYPE html>
<html>
<head>
<style type="text/css">
label > input{ /* HIDE RADIO */
display:none;
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
border:2px solid #f00;
}
</style>
</head>
<body>
<label>
<input type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>
<label>
<input type="radio" name="fb" value="big"/>
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://placehold.it/40x40/35d/fff&text=f">
</label>
<label>
<input id="fb4" type="radio" name="fb" value="long" />
<img src="http://placehold.it/60x15/35d/fff&text=f">
</label>
</body>
</html>
Output :)
1)
2)
3)
<html>
<head>
<style type="text/css">
label > input{ /* HIDE RADIO */
display:none;
}
label > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
border:2px solid #f00;
}
</style>
</head>
<body>
<label>
<input type="radio" name="fb" value="small" />
<img src="http://placehold.it/20x20/35d/fff&text=f">
</label>
<label>
<input type="radio" name="fb" value="big"/>
<img src="http://placehold.it/40x60/35d/fff&text=f">
</label>
<label>
<input id="fb3" type="radio" name="fb" value="med" />
<img src="http://placehold.it/40x40/35d/fff&text=f">
</label>
<label>
<input id="fb4" type="radio" name="fb" value="long" />
<img src="http://placehold.it/60x15/35d/fff&text=f">
</label>
</body>
</html>
Output :)
1)
2)
3)
No comments:
Post a Comment