css解决select下拉表单option高度的办法_html/css

来源：懂视网责编：小采时间：2020-11-27 16:01:43

css解决select下拉表单option高度的办法_html/css

css解决select下拉表单option高度的办法_html/css_WEB-ITnose:css在给select下拉表单设置样式如边框时可以轻松搞定，而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之，则往往会出现浏览器的兼容性问题，在网上查了好多资料，最好的解决办法也是大神们用js来模拟下拉表单。额~，好吧，

推荐度：

点击下载本文 文档为doc格式

导读css解决select下拉表单option高度的办法_html/css_WEB-ITnose:css在给select下拉表单设置样式如边框时可以轻松搞定，而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之，则往往会出现浏览器的兼容性问题，在网上查了好多资料，最好的解决办法也是大神们用js来模拟下拉表单。额~，好吧，

css在给select下拉表单设置样式如边框时可以轻松搞定，而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之，则往往会出现浏览器的兼容性问题，在网上查了好多资料，最好的解决办法也是大神们用js来模拟下拉表单。额~，好吧，暂且就按照大神们的办法来解决这个问题吧。

下边来说说css如何解决select的option高度的？

有时我们在设置了select的高度后，发现其option的高度还是默认的高度，跟我们设置的select的高度大相径庭，很显然，这不是我们想要的。笔者也在网上查了资料，貌似没有查到出现这个问题的原因，如果有高手知晓，还请不吝赐教。那么要想使option的高度达到我们想要的效果该如何实现呢？废话不多说，其实很简单。

解决办法：

直接设置option的上下内边距即可，即padding-top和padding-bottom。

哈哈。。是不是很简单，赶快去试试吧。

至于如何设置当鼠标经过option时的背景颜色，笔者还在进一步的探索中，如果有高手知晓，还请不吝赐教。

以上解决办法，高手请飘过~~