| select下拉框option的样式修改 | 您所在的位置：网站首页 › 下拉框小图标怎么去掉 › select下拉框option的样式修改 |
select下拉框option的样式修改
|
select原样式：
进行样式修改后的样式：
附上修改代码： //select外面必须包裹一个div,用来覆盖select原有的样式 筛选实验类型 实验1 实验2 css: .option{ /*用div的样式代替select的样式*/ margin: 100px; width: 140px; height: 40px; /*border-radius: 5px;*/ /*盒子阴影修饰作用,自己随意*/ /* box-shadow: 0 0 5px #ccc;*/ border: 1px solid #cccccc; position: relative; } .option select{ /*清除select的边框样式*/ border: none; /*清除select聚焦时候的边框颜色*/ outline: none; /*将select的宽高等于div的宽高*/ width: 100%; height: 40px; line-height: 40px; /*隐藏select的下拉图标*/ appearance: none; -webkit-appearance: none; -moz-appearance: none; /*通过padding-left的值让文字居中*/ padding-left: 20px; } /*使用伪类给select添加自己想用的图标*/ .option:after{ content: ""; width: 14px; height: 8px; background: url(../assets/arrow-down.png) no-repeat center; /*通过定位将图标放在合适的位置*/ position: absolute; right: 20px; top: 41%; /*给自定义的图标实现点击下来功能*/ pointer-events: none; }
但是有个问题；option的样式没办法修改；我各种百度搜索，没有搜索出如何修改其样式； 因为option是html固有元素;因而无论怎么修改在浏览器上都是不起作用的。 想修改option样式，只能通过div ul li模拟select功能； 我项目是用vue做的，所以我基于vue对select用div li进行改造。 用div ul li做的select下来框：
实现的代码如下： {{ item.name }} js: export default { name: 'javascript', data(){ return{ tableData:[ { 'name':111 }, { 'name':222 }, { 'name':333 }, { 'name':444 } ], show:false, value:'' } }, methods: { openValue(){ this.show=!this.show; }, getvalue(index,item){ this.value=item.name; this.show=false; }, }, css: .divInput{ margin: 200px; } ul li{ list-style: none; } .input{ width: 140px; height: 40px; line-height: 40px; padding-left: 10px; border: 1px solid #cccccc; position: relative; } .input input{ border: none; outline: none; width: 90%; } .input img{ position: absolute; right: 34px; top: 48%; } .list{ width: 150px; border: 1px solid #cccccc; overflow: hidden; } .list ul li{ width: 100%; height: 30px; cursor: pointer; line-height: 30px; padding-left: 10px; } .list ul li:hover{ background-color: #cccccc; }
这样就可以完成对select样式的修改了。 嘿嘿，开心！ |
【本文地址】
公司简介
联系我们