修改select样式
2024-09-20 09:59:52
CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可。
- select {
- /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
- border: solid 1px #000;
- /*很关键:将默认的select选择框样式清除*/
- appearance:none;
- -moz-appearance:none;
- -webkit-appearance:none;
- /*在选择框的最右侧中间显示小箭头图片*/
- background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
- /*为下拉小箭头留出一点位置,避免被文字覆盖*/
- padding-right: 14px;
- }
- /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
- select::-ms-expand { display: none; }
参考链接:
http://uplifted.NET/programming/change-default-select-dropdown-style-just-css/
最新文章
- 四极耳机接线标准,N版耳机改造为i版耳机
- 如何使用adb命令查看android中的数据库
- Win7 64位下配置Qt5.3和Wincap
- Windows Server 2008 Enterprise使用12G内存
- javascript 计算中文字符长度
- JavaEE(20) - Web层和EJB的整合(Entity Manager)
- Asp.Net MVC路由调试好帮手RouteDebugger
- Nginx之旅系列 - Nginx日志功能 PK Linux内核printk
- 关于Container With Most Water的求解
- Python基础之常用模块(二)
- Linux学习总结(十二)—— CentOS用户管理:创建用户、修改用户、修改密码、密码有效期、禁用账户、解锁账户、删除用户、查看所有用户信息
- javascript页面间传递参数
- [LeetCode] Set Intersection Size At Least Two 设置交集大小至少为2
- bash: jar: 未找到命令..(command not found)
- Selenium在定位的class含有空格的复合类的解决办法整理
- 个人网站搭建时linux中的相关配置记录(mysql,jdk,nginx,redis)
- react-native 入门教程
- sql优化实例(用左连接)
- Haskell语言学习笔记(27)Endo, Dual, Foldable
- 了解python wed 框架