首先先寫一個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里面設(shè)置圖片的大小和位置

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

在導(dǎo)入插入的地址即可，每一個地址就不一一展示了

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

效果圖如下

?

總結(jié)

以上是生活随笔為你收集整理的给select里面的option加入背景图片（select美化）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。