-1

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

我不想使用任何插件。

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

4

3 回答 3

1

给width: 100px你的选择输入。

.styled-select select {
    width: 100px;
    -webkit-appearance: none;
    background: transparent;
}
于 2013-07-08T20:59:28.937 回答
1

除了将背景图像应用到 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/

于 2013-07-08T21:08:45.060 回答
0

我找到了另一个更适合我的解决方案。

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

从这里：

对太宽的下拉菜单项的建议？

于 2013-07-12T15:42:07.653 回答