Question

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

我不想使用任何插件。

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

Answer 1

为您的选择输入提供width: 100px。

.styled-select select {
    width: 100px;
    -webkit-appearance: none;
    background: transparent;
}

Answer 2

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

它看起来像这样：

.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;以确保点击箭头图片时点击仍会触发选择。它可能不完全兼容浏览器，您可能需要对此进行一些研究......

我更新了你的小提琴：http://jsfiddle.net/hf5CV/24/

Answer 3

我找到了另一种解决方案，这对我来说更合适。

http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

从这里开始：

Recommendations for dropdown menu items that are too wide?

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

3 个答案: