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樣式的修改了。

嘿嘿，開心！