【javascript】javascript 美化单选,多选和下拉框
<div id="cnblogs_post_body">这是以前收藏的用 javascript 实现美化单选,多选和下拉框的效果。先上效果图:
http://pic002.cnblogs.com/images/2012/463154/2012120616551553.png
Html代码:
<div class="cnblogs_code"><!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>checkbox and radio and select</title> <style type="text/css"> body{font:0.8em arial,sans-serif;} .checkbox,.radio{width:19px;height:25px;padding-right:5px;background:url(checkbox.gif) no-repeat;float:left;} .radio{background:url(radio.gif) no-repeat;} .select{position:absolute;width:158px;height:21px;padding:0 24px 0 8px;color:white;font:12px/21px arial,sans-serif;background:url(select.gif) no-repeat;overflow:hidden;} </style></head><body> <h1>Checkbox</h1> <p><input type="checkbox" name="checked" id="checked" class="styled"/><label for="checked">Checked</label></p> <h1>Radio</h1> <p><input type="radio" name="radio" id="yes" class="styled"/><label for="yes">Yes</label></p> <p><input type="radio" name="radio" id="no" class="styled"/><label for="no">No</label></p> <h1>Select</h1> <select class="styled" name="who"> <option selected="selected">Who</option> <option>What</option> <option>When</option> <option>Where</option> <option>How</option> </select></body></html><script type="text/javascript" src="custom-form-elements.js"></script>
页:
[1]