下拉列表的样式
2014-11-13 00:53
169 查看
看到默认的下拉列表样式,我觉得简直丑到爆,所以受不了就百度了一个下拉列表的样式,找到一篇觉得不错的文章:http://beyondweb.cn/article_detail.php?id=355
于是我就开始引用了
html部分:
css部分:
ok,重点来了!
我引用的文章里面的js代码部分是这样的:
由于我是个菜鸟,especially在js部分,于是我就请教我的代码男神郑先生,经过他的调试,js代码改成了如下:
ok,然后接下来是修改html的代码:
注意:a标签的(class=“btn-select” id="btn_select")依旧是下拉列表样式,不用修改,但在select标签里面要加上
到此为止就结束了~感谢http://beyondweb.cn/ 该站战主!
于是我就开始引用了
html部分:
<form> <a class="btn-select" id="btn_select"> <span class="cur-select">请选择</span> <select> <option>选项一</option> <option>选项二</option> <option>选项三</option> <option>选项四</option> <option>选项五</option> </select> </a> </form>
css部分:
* { margin: 0; padding: 0; } body { padding: 50px 50px; } .btn-select { position: relative; display: inline-block; width: 150px; height: 25px; background-color: #f80;/*下拉列表下层颜色*/ font: 14px/20px "Microsoft YaHei"; color: #fff;/*下拉列表一级菜单字体颜色*/ } .btn-select .cur-select { position: absolute; display: block; width: 150px; height: 25px; line-height: 25px; background: #f80 url(ico-arrow.png) no-repeat 125px center;/*下拉列表一级背景色,url是下拉列表的倒三角图片的地址*/ text-indent: 10px; } .btn-select:hover .cur-select { background-color: #f90; } .btn-select select { position: absolute; top: 0; left: 0; width: 150px; height: 25px; opacity: 0; filter: alpha(opacity: 0;); font: 14px/20px "Microsoft YaHei"; color: #f80; } .btn-select select option { text-indent: 10px; } .btn-select select option:hover { background-color: #f80; color: #fff; }
ok,重点来了!
我引用的文章里面的js代码部分是这样的:
var $$ = function (id) { return document.getElementById(id); } window.onload = function () { var btnSelect = $$("btn_select"); var curSelect = btnSelect.getElementsByTagName("span")[0]; var oSelect = btnSelect.getElementsByTagName("select")[0]; var aOption = btnSelect.getElementsByTagName("option"); oSelect.onchange = function () { var text=oSelect.options[oSelect.selectedIndex].text; curSelect.innerHTML = text; } }but,当我引用后发现,一个页面只能用一次该样式!因为他的js代码是用id来控制的,可是一个html只能有一个唯一的id!oh~我一个html要用很多次这个下拉列表啊,嗯~~我想啊想,改啊改,发现最好的办法是改掉js部分的代码= =。
由于我是个菜鸟,especially在js部分,于是我就请教我的代码男神郑先生,经过他的调试,js代码改成了如下:
<script type="text/javascript"> <span style="white-space:pre"> </span>function ddd(v){ <span style="white-space:pre"> </span>var btnSelect = $("#s"+v); var btntext=btnSelect.prev(); btntext.text(btnSelect.val()); } </script>
ok,然后接下来是修改html的代码:
<a class="btn-select" id="btn_select"> <span class="cur-select">请选择</span> <select id="s4" onclick="ddd('4')" name="4"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </a>
注意:a标签的(class=“btn-select” id="btn_select")依旧是下拉列表样式,不用修改,但在select标签里面要加上
id="sn" onclick="ddd('n”)"n=1,2,3,4,5...n
到此为止就结束了~感谢http://beyondweb.cn/ 该站战主!
相关文章推荐
- 转载 -- CSS3 中关于 select 下拉列表的样式
- +++用纯css改变下拉列表select框的默认样式+++
- 漂亮的下拉列表样式
- css改变下拉列表select框的默认样式
- 下拉选样式(列表伪装)
- 设计多彩下拉列表样式
- 下拉列表旁指下箭头及字体颜色等样式修改(2)
- weiyi通讯录(三)仿微信下拉列表和android样式
- 纯css修改下拉列表select的默认样式
- QComboBox设置下拉列表中子项的样式
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
- 漂亮的下拉列表 select样式 css处理 特效
- 用纯css改变下拉列表select框的默认样式
- 创建CheckBox样式的下拉列表
- CSS3 中关于 select 下拉列表的样式
- 纯css改变下拉列表select框的默认样式
- 用纯css改变下拉列表select框的默认样式
- CSS3 中关于 select 下拉列表的样式
- 隔行变色,选中变色,鼠标变小手样式;姓名查询条件 过滤敏感字符 下拉列表排序 非空验证添加信息 点击按钮删除
- 用纯css改变下拉列表select框的默认样式