如何自定义select以及下拉选项option的样式

Question

问题描述：自定义下拉选项的样式

新手练习做页面的时候，碰到原型图如下

问题

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

• 简单的是使用外面包裹div覆盖select的样式，这种方法不能只能将select的样式做的想一点儿，下拉框改不成一样的（也可能是我不会改）
• 复杂的这是用了其他标签和js来模拟一个表单，样式做的很炫酷，但是我自己没法儿改成想要的效果。这种搜了好多都是用的插件，目前还看不懂插件里面写的啥意思。

目前只能实现select框做的尽量还原，但是选中时的下拉列表样式，周围的那个红边框，选项上的对勾这些都实现不了，有没有什么不用插件实现的方法或者demo。

Answer 1

DEMO

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

我记得我当时做的时候，也搜过，结果好像还是用 div 模拟，交互用 js，select 的样式貌似很难修改，自定义的大多都是用 div 模拟；

这个模拟应该不难，可以先做静态页面，做好了，js 不会不模拟也行，会的话，就模拟下，貌似没要求模拟 js

Answer 2

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

Answer 3

模拟实现参考div模拟的下拉框，纯css参考CSS自定义select下拉选择框的样式(不用其他标签模拟)

Answer 4

可以模拟实现，写一个div，里面是ul列表，点中某一个li时加上active类，其他兄弟元素去掉这个class，active负责激活时的样式，对好可以用图片，隐藏掉，有active时显示，外框红色可以用outline实现

Answer 5

两种方法：
1.用div+ul模拟
2.用css设置option的样式