下拉列表的样式
来源:互联网 发布:阅读题软件 编辑:程序博客网 时间:2024/04/30 23:24
看到默认的下拉列表样式,我觉得简直丑到爆,所以受不了就百度了一个下拉列表的样式,找到一篇觉得不错的文章:http://beyondweb.cn/article_detail.php?id=355
于是我就开始引用了
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/ 该站战主!
0 0
- 下拉列表的样式
- 漂亮的下拉列表样式
- c# 设置属性的样式(下拉列表)
- CRM: 创建CheckBox样式的下拉列表
- 浅谈CSS自定义下拉列表的样式
- 自定义Spinner下拉列表样式
- 【教程】定制下拉列表选中时的样式
- 漂亮的下拉列表 select样式 css处理 特效
- css改变下拉列表select框的默认样式
- CSS3 中关于 select 下拉列表的样式
- 修改下拉列表<select>的默认css样式
- CSS3 中关于 select 下拉列表的样式
- 纯css修改下拉列表select的默认样式
- 纯css来改变下拉列表框的样式。
- QComboBox设置下拉列表中子项的样式
- android自定义Spinner下拉菜单和AutoCompleteTextView自动显示的(下拉列表框)样式
- android自定义Spinner下拉菜单和AutoCompleteTextView自动显示的(下拉列表框)样式
- 下拉列表-select样式css处理
- ANDROID SDK 更新
- Android利用泛型和反射来实现对数据库的操作--SqlHelper
- 借助 Adobe Scout 理解 Flash Player
- Android中canvas.drawText()无法使用\r\n换行的解决方案
- 2014-11-13
- 下拉列表的样式
- Leetcode: Max Points on a Line
- WorksheetFunction 成员 (Excel)
- Yii1.1 实现简单restful 框架
- caffe源码分析--Blob类代码研究
- 类模板声明与定义为什么不能分离
- git 命令纪要
- AWS Ubuntu下安装LAMP
- 稀疏矩阵A和B,其行数和列数对应相等,编写一个程序,计算A和B之和,假设稀疏矩阵采用三元组表示