给select里面的option加入背景图片（select美化）

首先先写一个select下拉选择框

  <select class="select" onmousedown="if(this.options.length>5){this.size=5}" >  οnblur="this.size=0" οnchange="this.size=0">       
           <option class="option1"  >请选择</option>
            <option class="option2"   value="1">黑色</option>
            <option class="option3"  value ="2">蓝色</option>
            <option class="option4"  value="3">青绿色</option>
            <option class="option5"  value="4">鲜绿色</option>
            <option class="option6"   value="5">粉红色</option>
            <option class="option7"  value="6">红色</option>
            <option class="option8"  value="7">黄色</option>
            <option class="option9"   value="8">白色</option>
            <option class="option10"   value="9">深蓝色</option>
            <option class="option11"   value="10">青色</option>
            <option class="option12"   value="11">绿色</option>
            <option class="option13"   value="12">紫色</option>
            <option class="option14"  value="13">深红色</option>
            <option class="option15"  value="14">深黄色</option>
            <option class="option16" value="15">50%灰色</option>
            <option class="option17" value="16">25%灰色</option>
            
          </select>

在css里面设置图片的大小和位置

option{
  height: 25px;
  text-align: center;
background-size: 15px;
background-repeat: no-repeat;
 background-position: 5px 2px
}

在导入插入的地址即可，每一个地址就不一一展示了

  .option2{
background-image: url('./img/黑色.jpg');
  }

效果图如下