前端空间 发表于 2012-12-22 21:25:13

【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]
查看完整版本: 【javascript】javascript 美化单选,多选和下拉框