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

Question

通过使用指南，我创建了一个 div 来 overflow hidden 并将正常的选择箭头推离右侧以使其不可见。通过在外部 div 上使用自定义背景图像，我得到了自己的下载箭头。但是，对于选项的长值，文本会在我的自定义箭头图像之上运行。我尝试向选择值添加填充，以便文本将在箭头之前停止，但这会将默认箭头推回到 View 中，而不是在选项文本和箭头之间添加空格。如何防止文本在我的箭头上方运行？

哦!防止 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