如何自定義select以及下拉選項(xiàng)option的樣式

問(wèn)題描述：自定義下拉選項(xiàng)的樣式

新手練習(xí)做頁(yè)面的時(shí)候，碰到原型圖如下

問(wèn)題

百度了一些方法都不能達(dá)到效果：

簡(jiǎn)單的是使用外面包裹div覆蓋select的樣式，這種方法不能只能將select的樣式做的想一點(diǎn)兒，下拉框改不成一樣的（也可能是我不會(huì)改）
復(fù)雜的這是用了其他標(biāo)簽和js來(lái)模擬一個(gè)表單，樣式做的很炫酷，但是我自己沒(méi)法兒改成想要的效果。這種搜了好多都是用的插件，目前還看不懂插件里面寫(xiě)的啥意思。

目前只能實(shí)現(xiàn)select框做的盡量還原，但是選中時(shí)的下拉列表樣式，周?chē)哪莻€(gè)紅邊框，選項(xiàng)上的對(duì)勾這些都實(shí)現(xiàn)不了，有沒(méi)有什么不用插件實(shí)現(xiàn)的方法或者demo。

回答

編輯回答

來(lái)守候

DEMO

題主做的是IFE 的題目，我的 github 里有不少，你看 DEMO 符不符合你的要求：

我記得我當(dāng)時(shí)做的時(shí)候，也搜過(guò)，結(jié)果好像還是用 div 模擬，交互用 js，select 的樣式貌似很難修改，自定義的大多都是用 div 模擬；

這個(gè)模擬應(yīng)該不難，可以先做靜態(tài)頁(yè)面，做好了，js 不會(huì)不模擬也行，會(huì)的話(huà)，就模擬下，貌似沒(méi)要求模擬 js

2017年11月10日 10:15

編輯回答

厭惡我

不想用插件，只能用div模擬下拉框，js模擬選中效果

2018年4月11日 20:06

編輯回答

病癮

兩種方法：
1.用div+ul模擬
2.用css設(shè)置option的樣式

2018年6月22日 18:21

編輯回答

念初

可以模擬實(shí)現(xiàn)，寫(xiě)一個(gè)div，里面是ul列表，點(diǎn)中某一個(gè)li時(shí)加上active類(lèi)，其他兄弟元素去掉這個(gè)class，active負(fù)責(zé)激活時(shí)的樣式，對(duì)好可以用圖片，隱藏掉，有active時(shí)顯示，外框紅色可以用outline實(shí)現(xiàn)

2017年4月17日 09:15

編輯回答