CSS --- 修改默认下拉框样式
2016-04-06 15:37
393 查看
由于select下拉框的整体样式,一般比较难看,而且各个浏览器显示的样式也不同;
可以通过CSS来修改默认下拉框的样式,通过appearance清除默认的select样式,
重新设置高度、宽度、字体颜色以及边框样式,并且通过图片来修改下拉款小箭头的样子;
appearance:
appearance 属性允许您使元素看上去像标准的用户界面元素。
默认值:normal
语法:appearance: normal|icon|window|button|menu|field;
由于各个浏览器厂商的支持不同,需要加上浏览器的css前缀;
参数值:
1.normal 将元素呈现为常规元素。
2.icon 将元素呈现为图标(小图片)。
3.window 将元素呈现为视口。
4.menu 将元素呈现为一套供用户选择的选项。
5.field 将元素呈现为输入字段。
可以通过CSS来修改默认下拉框的样式,通过appearance清除默认的select样式,
重新设置高度、宽度、字体颜色以及边框样式,并且通过图片来修改下拉款小箭头的样子;
appearance:
appearance 属性允许您使元素看上去像标准的用户界面元素。
默认值:normal
语法:appearance: normal|icon|window|button|menu|field;
由于各个浏览器厂商的支持不同,需要加上浏览器的css前缀;
参数值:
1.normal 将元素呈现为常规元素。
2.icon 将元素呈现为图标(小图片)。
3.window 将元素呈现为视口。
4.menu 将元素呈现为一套供用户选择的选项。
5.field 将元素呈现为输入字段。
select { appearance:none;//清除默认样式 -moz-appearance:none; -webkit-appearance:none; // 下拉箭头图片 background:url(../images/select_arrow.png) no-repeat right center; padding-right:14px;// 留出来下拉箭头的位置 width:148px; height:30px; border:1px solid #ccc; color:#999999; }
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码