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

Question

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

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

问题

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

• 简单的是使用外面包裹div覆盖select的样式，这种方法不能只能将select的样式做的想一点儿，下拉框改不成一样的（也可能是我不会改）

• 复杂的这是用了其他标签和js来模拟一个表单，样式做的很炫酷，但是我自己没法儿改成想要的效果。这种搜了好多都是用的插件，目前还看不懂插件里面写的啥意思。

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

Answer 1

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

Answer 2

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

Answer 3

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