Question

我需要实现一个自定义选择框，其最大宽度小于选项的最大宽度。

选择框的样式很容易（可以使用大量的指南all over the internet），这是我的实现：

HTML：

<div class="styled-select">
    <select>
        <option selected>All</option>
        <option>A short option</option>
        <option>A long option with way too much text</option>
        <option>Another way too long option, but even longer</option>
    </select>
</div>

CSS：

styled-select {
    overflow-x: hidden;
    width: 200px;
    background: #6d6d6d url("dropdown-image.png") 95% 50% no-repeat;
    padding: 5px;
}

.styled-select select {
    width: 130%;
    background: transparent;
    border: 0;
    color: white;
}

我创建了一个JSFiddle来说明我的问题。 CSS中极长的字符串只是Base 64编码的图像。

一旦选择了长选项，它就会溢出＆＃34;假的＆＃34;下拉按钮和破坏我的设计破坏。如何隐藏按钮溢出的文本，同时仍然可以点击＆＃34;假＆＃34;按钮？

Answer 1

我的诀窍是将箭头移动到伪元素中，并将其绝对放在.styled-select元素中。请参阅此处的小提琴：http://jsfiddle.net/teddyrised/bx131j42/3/

.styled-select {
    position: relative;
    overflow-x: hidden;
    width: 200px;
    padding: 5px;
    background-color: #6d6d6d;
}
.styled-select::before {
    pointer-events: none;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 20%;
    background: #6d6d6d;
    background-image: (...);
    background-repeat: no-repeat;
    background-position: center center;
}

pointer-events: none是为了确保忽略伪元素上的click事件并将其传递给位于下面的<select>元素（具有较低的z-index）。但是，某些浏览器（例如IE10及以下版本）do not support this。为了避免这种情况，你必须使用一个真实的元素（而不是一个伪元素，看看我的评论）并听取该元素上的click处理程序，并将其作为.focus()事件传递给{{1元素，例如：

标记：

<select>

JS：

<div class="styled-select">
    <span class="dummy-arrow"></span>
    <select><!-- options --></select>
</div>

一些提示：

$(function() { $('.dummy-arrow').click(function() { $(this).next('select').focus(); }); });元素难以定型，因为它的外观特定于操作系统。某些浏览器/操作系统将遵守<select>声明，但不要指望它。相反，您可能希望依赖基于JS的替换/虚拟。
如果要删除焦点上select元素周围的蓝色边框，请使用appearance: none。但请注意，这可能会影响网站的可用性（如果您的选择菜单在视觉上不明显）。

带有长选项的样式选择框

1 个答案: