html?

<select class="select"> <option value="volvo" disabled>Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>

?css

.select { border: 1px solid #bdb2b2; border-radius: 10px; /*清除select聚焦时候的边框颜色*/ outline: none; /*设置select的宽高*/ width: 200px; height: 40px; line-height: 40px; /*隐藏select的下拉图标*/ appearance: none; -webkit-appearance: none; -moz-appearance: none; /*通过padding-left的值让文字处于合适位置*/ padding-left: 20px; /* 设置下拉图标 */ background: url("1.jpg") no-repeat right center transparent; }

option的样式没办法修改。

因为option是html固有元素；因而无论怎么修改在浏览器上都是不起作用的。

想修改option样式，只能通过div ul li模拟select功能；功能如下，具体细节可以自己再调节。

?html

<input class="choose" type="text" placeholder="请输入" readonly="readonly"> <div class="option"> <ul> <li>11</li> <li>22</li> <li>33</li> </ul>

css

.choose { padding: 8px 5px; width: 190px; outline: none; border: 1px solid rebeccapurple; border-radius: 5px; } .option { display: none; width: 180px; padding: 5px 10px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #e2b5b5; } ul, li { margin: 0; padding: 0; list-style: none; }

js

$(".choose").click(function () { $(".option").show() }) $(".option li").click(function () { var _text = ($(this).text()) $(".choose").val(_text) $(".option").hide() }) //如果某些选项不支持点击，提供下面这个思路 $(".option li").click(function () { var _text = ($(this).text()) if (_text == 33) { } else { $(".choose").val(_text) $(".option").hide() } })

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。