CSS自定义下拉选择框不使用其他标签来模拟和兼容大多数浏览器。
如何自定义选择下拉框的样式，首先考虑如何使用纯CSS实现，并重写浏览器默认样式，但未能达到所需的兼容性。下面是一个更有效的解决方案。需要帮助的朋友能看到它。今天，有人问如何自定义选择下拉选择框式的组，然后在激烈的讨论组，开始总是考虑如何使用纯CSS实现，浏览器的默认样式盖，但最终因为兼容性问题处理不好，失败了，最终的解决方案是使用其他元素（UL、李）模拟下拉菜单，或使用一些网上现成的插件。
实际上，选择不能用纯CSS解决这个自定义样式问题。但由于花了这么长时间，我们来谈谈CSS实现的想法。
首先，默认样式：
刚开始考虑使用背景，但在选择集测试无效后，再考虑用其他元素覆盖下箭头，然后将背景设置为这个元素，编写一个demo，说明可行，然后有以下几点。
首先，使用一个标记来选择：
复制代码代码如下所示：
选项1
方案二
选项三
选项四
选项五
在CSS selectldquo，但不是隐藏；显示：无；否则，选择元素不存在，在这里我们可以选择不透明度为0，这样就看不见，但不影响下拉框，点击下拉框出现；这似乎是可行的，但发现每个选项，不显示此选项，原因是选择隐藏，连话也隐藏了，所以我们需要一个额外的标签存储每一次的选择，这里是完整的HTML代码：
复制代码代码如下所示：
请选择
选项1
方案二
选项三
选项四
选项五
CSS代码：
复制代码代码如下所示：
{ *
保证金：0；
填充：0；
}
{体
填料：50px 50px；
}
{按钮选择。
职位：相对；
显示：内联块；
宽度：150px；
身高：25px；
背景颜色：# F80；
字体：14px / 20px 微软雅黑；
# FFF颜色；
}
btn-select.cur-select {。
位置：绝对；
显示块；
宽度：150px；
身高：25px；
行高：25px；
背景：# F80 URL（ICO箭头。PNG）没有重复125px中心；
文本缩进：10px；
}
按钮选择：hover.cur-select {。
背景颜色：# F90；
}
{选择按钮选择。
位置：绝对；
顶部：0；
左：0；
宽度：150px；
身高：25px；
不透明性：0；
滤镜：alpha（不透明度：0；；）；
字体：14px / 20px 微软雅黑；
颜色：# F80；
}
按钮选择{选项。
文本缩进：10px；
}
。按钮选择{选择：悬停
背景颜色：# F80；
# FFF颜色；
}
最后的效果就是这个（Chrome上的截图）：
但是这种方式不能完全覆盖浏览器的默认样式，比如下拉框的边框不能处理，IE更糟糕，所以真正的项目仍在使用插件或其他元素。
这里，这篇文章还没有完成，使用了一段JS，所选内容应该显示在跨度标签中，下面是js代码：
复制代码代码如下所示：
函数（id）{ $
返回document.getelementbyid（ID）；
}
在window.onload =函数（）{
无功btnselect = $（btn_select ）；
无功curselect = btnselect.getelementsbytagname（跨越）{ 0 }；
无功oselect = btnselect.getelementsbytagname（选择）{ 0 }；
VaR很囧= btnselect.getelementsbytagname（选项）；
oselect.onchange =函数（）{
var text = oselect。选项{ oselect文本。SelectedIndex }；
curselect.innerhtml =文本；
}
}