修改select样式
2016-03-29 11:40
615 查看
//下拉列表 var sel = document.getElementsByTagName("select") ; for (i = 0, j = sel.length; i < j; i++) { sel[i].addEventListener("change",function(){ this.previousSibling.textContent = $(this).find("option:selected").text(); }); }
<div class=box2><span></span><select><option value="" selected>10年</option><option value="">5年</option><option value="">20年</option><option value="">30年</option></select><span class="select-tb"></span></div>
.box2{ border: 1px solid #CCCCCC; height: 37px;clip: rect(0px,179px,16px,0px);overflow: hidden;background-color: #f7f7f7;display: inline-block; line-height: 37px; position: relative; width: 200px;font-size: 20px;} .box2 span:first-child{display: inline-block;width: 150px;position: absolute;}select{opacity: 0; font-size: 20px; width: 200px; height: 37px;border: 0px; z-index: 10; position: absolute;left: 0px;} .select-tb{background: url("../images/zc-search.png") no-repeat; width: 37px;height: 37px;display: inline-block;margin-left: 163px;}
相关文章推荐
- css3属性整理
- 设置文本框失去焦点与获得焦点的样式(新)
- css CENTER
- web工程开发过程中,js、css文件修改提交后修改效果不起作
- [转] CSS direction属性简介与实际应用 ---张鑫旭
- radio改版样式
- CSS学习(二十一)-flexbox模型之二
- PHP实现可自定义样式的分页类
- IE下页面样式错乱,其他浏览器正常
- CSS
- css样式(一)
- CSS选择器
- 面包屑 CSS(合并小图标,减少链接请求数量)
- CSS学习
- CSS3滤镜详解--兼容器问题解决
- CSS布局和排版要点
- 围住浮动元素的三种方法
- CSS 相对/绝对(relative/absolute)定位系列(四)
- IE对于overflow:hidden;及其它CSS属性不兼容问题
- 用CSS3中的flexbox 布局模式使div内容垂直居中: