Question

通过使用指南，我创建了一个隐藏溢出的div，并将正常的选择箭头从右侧推开，因此无法看到。通过在外部div上使用自定义背景图像，我得到了自己的下载箭头。但是，对于较长的选项值，文本会在我的自定义箭头图像上运行。我尝试在选择值中添加填充，以便文本在箭头之前停止，但是这会将默认箭头推回到视图中，而不是在选项文本和箭头之间添加空格。如何防止文本在箭头上运行？

哦！并且保持chrome不会在我的选择框周围放置橙色框的代码也不起作用。

JSFIDDLE在这里：http://jsfiddle.net/not_a_generic_user/yLy7Y/1/

.styled_select {
    border-radius   : 5px;
    border          : 1px solid #666;
    overflow        : hidden;
    margin-bottom   : 14px;
    position        : relative;
    background      : url('graphics/downarrow.png') no-repeat right -1px;
    cursor          : pointer;
}

.styled_select select {
/*  padding-right   : 40px;         /* So drop down items with long names don't have text over the down arrow */
    width           : calc(100% + 30px);
}

select {
    background      : transparent;
    font-size       : 13px;
    text-transform      : uppercase;
    font-weight     : bold;
}
select:focus {
    outline         : none;         /* kill the orange outline on select but doesn't work*/
    -webkit-appearance  : none;
}

<div class="styled_select ">
    <select id="list_position" name="">
    <option value="-1">No Change</option>
    <option value="0">On top</option>
    <option value="list_49">After Movies to Watch</option>
    <option value="list_50">After Anniversary Party Supplies and MORE!</option>
    </select>
</div>

Answer 1

你的选择总是会在箭头顶部运行，因为你的箭头是选择后面div的背景。

有了一点css3，你应该能够达到你想要的效果：

.styled_select {
    display:block;
    width:150px;
    height:20px;
    border-radius   : 5px;
    border          : 1px solid #666;
    overflow        : hidden;
    position        : relative;
}

.styled_select:after {
    content     : url('http://www.goodpricescome.com/graphics/downarrow.png') no-repeat right -1px;
    display:block; 
    width:25px; 
    height:25px;
    position:absolute; 
    right:0;
    top:0;
    pointer-events:none;
}

Example

您还会在我的示例中注意到，我已将您的包含div更改为标签，以便更好地访问

If you don't want to use :after try this

Answer 2

您的<select>比您的<div>宽（我认为是隐藏箭头），但这正是使文本与背景图像重叠的原因。

在不减小<select>的宽度并因此显示箭头的情况下，如果不使用CSS3（在某些较旧的浏览器中不支持，特别是IE＆lt; 9）或者不支持CSS3，这将不容易实现。 Javascript（您可能不想使用它）。

有关删除箭头的解决方案，请参阅here，但很难实现跨浏览器。

您可能希望使用专用库来代替此效果，例如Chosen。

编辑 - 尝试outline: 0;代替outline: none;。

Answer 3

我已经修改了小提琴升技，添加了一些javascript，我不确定你是否还可以。看看。

http://jsfiddle.net/yLy7Y/5/

核心思想是根据文本长度调整宽度，但极长的字符串可能会破坏它。

function change(){
    var d = document.getElementById('list_position');
    document.getElementById("main_select").style.width =    (d.options[d.selectedIndex].text.length*8+40)+"px";
}

选择元素文本在我的自定义箭头上运行

3 个答案: