在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何自定義select以及下拉選項option的樣式

如何自定義select以及下拉選項option的樣式

問題描述：自定義下拉選項的樣式

新手練習(xí)做頁面的時候，碰到原型圖如下
clipboard.png

問題

百度了一些方法都不能達到效果：

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

目前只能實現(xiàn)select框做的盡量還原，但是選中時的下拉列表樣式，周圍的那個紅邊框，選項上的對勾這些都實現(xiàn)不了，有沒有什么不用插件實現(xiàn)的方法或者demo。

回答
編輯回答
來守候

DEMO

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

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

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

2017年11月10日 10:15
編輯回答
厭惡我

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

2018年4月11日 20:06
編輯回答
病癮

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

2018年6月22日 18:21
編輯回答
念初

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

2017年4月17日 09:15
編輯回答
負我心

模擬實現(xiàn)參考div模擬的下拉框，純css參考CSS自定義select下拉選擇框的樣式(不用其他標簽?zāi)M)

2017年12月28日 10:53