如何获得 Select elements Options to "right-width" 但保持 Select 本身的宽度不变？

Question

这个CSS在使用时可以用来改变Select的宽度：

select:focus {width:300px;}

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

IOW，考虑将 "Fiver was a Rabbit, but unlike Peter and Roger" 的 Select 选项作为 Select 中的一个选项，而不是在下拉时这样显示：

| 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 元素占用过多的空间并将元素挤到右边)

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

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

(Select 保持相同的宽度，但选项 "right-width" 的宽度刚好足以显示所有文本，但不会更宽。

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

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: "93";
        position: absolute;
        right: 5px;
        top: 0;
    }

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

查看此 jsfiddle 示例。不是很漂亮，但是你可以理解。

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

如何获得 Select elements Options to "right-width" 但保持 Select 本身的宽度不变？

How can I get a Select elements Options to "right-width" but leave the width of the Select itself unchanged?

css

html-select