javascript - 使用 CSS 自定义选择下拉列表

Question

我必须显示 <select>尺寸为 100px，但 <option>其中更长，我想显示全部内容，所以我包装了 <select>用<div>并将大小设置为 100px。我为下拉箭头使用了背景图像。我的问题是，正如您在下面的链接中看到的，文本与图像重叠。如何让文字不重叠在图片上？

我不想使用任何插件。

http://jsfiddle.net/JavaKB/hf5CV/8/

Answer 1

您可以使用 :after 伪元素，而不是将背景图像应用于 div，将背景图像应用于该元素，并将其放置在选择的顶部。

它看起来像这样:

.styled-select {
    width: 100px;
    padding: 2px;
    overflow: hidden;
    position: relative;
}
.styled-select:after {
    content: '';
     background: url("http://i.stack.imgur.com/DNROu.jpg") no-repeat right;
    width: 20px;
    height: 18px;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
}

请注意，我添加了 pointer-events: none; 以确保当您单击箭头图像时单击仍会触发选择。它可能不完全跨浏览器兼容，您可能需要对此做一些研究......

我更新了你的 fiddle :http://jsfiddle.net/hf5CV/24/