select下拉框option的样式修改

select原样式：

进行样式修改后的样式：

附上修改代码：

//select外面必须包裹一个div,用来覆盖select原有的样式

<div class="option"><select name=""><option value=" ">筛选实验类型</option><option value="实验1">实验1</option><option value="实验2">实验2</option></select></div>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下来框：

实现的代码如下：

<div class="divInput"><div class="input" @click="openValue"><input v-model="value" type="text" placeholder="筛选实验类型"><img src="../assets/arrow.png" alt=""></div><div class="list" v-show="show"><ul><li @click="getvalue(index,item)" v-for="(item,index) in tableData" :key="item.index">{{ item.name }}</li></ul></div></div>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样式的修改了。

嘿嘿，开心！