Question

此CSS可用于在使用时改变Select的宽度：

select:focus {width:300px;}

...但我希望只有选项（下拉位）增加宽度，而不是选择元素本身（因为它在下拉选项之前出现）。

IOW，考虑选择＆＃34; Fiver是一只兔子，但不像Peter和Roger＆＃34;作为选择中的一个选项，而不是在下拉时显示如下：

| Select  Element when "at rest" |
Fiver was a Rabbit, but unlike Pe

（选项截断）

......或者这个：

| Select  Element when "at rest"              |
Fiver was a Rabbit, but unlike Peter and Roger|

（选择元素占用过多的房地产和右侧的肘部元素）

......我希望它是这样的：

| Select  Element when "at rest" |
Fiver was a Rabbit, but unlike Peter and Roger|

（选择保持相同的宽度，但选项＆＃34;右边宽度＆＃34;足够宽以显示所有文字，但不会更宽。）

这可能吗？如果是这样，怎么样？

Answer 1

自定义样式包装器怎么样？

HTML：

<div class="select-wrapper">
    <select>
        <option value="" disabled selected>Select your option</option>
        <option>First option</option>
        <option>Second really really really long option</option>
    </select>
</div>

SCSS：

.select-wrapper {
    position: relative;
    width: 200px;
    overflow: hidden;
    border: 1px solid #ccc;

    &::after {
        content: "\2193";
        position: absolute;
        right: 5px;
        top: 0;
    }

    select {
        background: transparent;
        border: 0;
        padding: 3px;
    }
}

有关示例，请参阅此jsfiddle。它并不漂亮，但你可以理解。

更新：根据B. Clay Shannon的评论，看到这个updated jsfiddle，没有周围的div。

如何获得选择元素选项到＆＃34;右边宽度＆＃34;但是保持Select的宽度不变？

1 个答案: