css修改下拉列表select默认样式的实例
程序员文章站
2022-03-25 16:04:08
...
select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式,希望本文能帮助到大家。
给select添加父元素p目的是为了,用p的样式覆盖住select样式。
css代码:
p{ //用p的样式代替select的样式 width: 200px; height: 40px; border-radius: 5px; //盒子阴影修饰作用,自己随意 box-shadow: 0 0 5px #ccc; position: relative; } select{ //清除select的边框样式 border: none; //清除select聚焦时候的边框颜色 outline: none; //将select的宽高等于p的宽高 width: 100%; height: 40px; line-height: 40px; //隐藏select的下拉图标 appearance: none; -webkit-appearance: none; -moz-appearance: none; //通过padding-left的值让文字居中 padding-left: 60px; } //使用伪类给select添加自己想用的图标 p:after{ content: ""; width: 14px; height: 8px; background: url(img/xiala.png) no-repeat center; //通过定位将图标放在合适的位置 position: absolute; right: 20px; top: 45%; //给自定义的图标实现点击下来功能 pointer-events: none; }
select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式: html代码:
相关推荐:
修改radio、checkbox、select默认样式的方法_html/css_WEB-ITnose
以上就是css修改下拉列表select默认样式的实例的详细内容,更多请关注其它相关文章!
推荐阅读
-
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
-
修改 bootstrap table 默认detailRow样式的实例代码
-
微信小程序修改swiper默认指示器样式的实例代码
-
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
-
vue中element-ui组件默认css样式修改的四种方式
-
前端 修改浏览器默认的滚动条CSS样式
-
CSS 修改浏览器默认的滚动条样式
-
js动态设置select下拉菜单的默认选中项实例
-
element-ui中的select下拉列表设置默认值方法
-
ie6设置select下拉列表的属性不起作用_html/css_WEB-ITnose