有没有一种方法可以在 select 标签处于焦点状态时向其添加样式，并且还可以查看下拉列表

Question

所以，我正在制作一个包含一堆 html 和 css 片段的页面，这些片段是我将来可能需要的，并且我已经成功地自定义了 <select> 标签添加填充，删除默认外观，并放入自定义插入符号，我还添加了一个等于顶部和底部填充总和的边框半径，以使角完全圆润。我的问题是，如何才能使 border-bottom-left-radius 和 border-bottom-right-radius 仅在下拉菜单打开时才等于 0 以便它们看起来已连接？ HTML:

<!-- Don't ask about the languages lol -->
<select name="language" class="select">
    <option value="" selected="selected" disabled>Select a language</option>
    <option value="klingon">Klingon</option>
    <option value="sindarin">Sindarin</option>
    <option value="dothraki">Dothraki</option>
    <option value="aramaic">Aramaic</option>
    <option value="latin">Latin</option>
    <option value="akkadian">Akkadian</option>
</select>

CSS:

.select {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 400;
    color: var(--text);
    padding: 10px 30px 10px 15px;
    box-sizing: border-box;
    margin: none;
    border: none;
    outline: 0;
    border-radius: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='caret-down' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' class='svg-inline--fa fa-caret-down fa-w-10 fa-3x'%3E%3Cpath fill='white' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' class=''%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat, repeat;
    background-position: right 15px top 50%, 0 0;
    background-size: .65em auto, 100%;
    transition: all 200ms ease-in;
}

.select:focus {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

如您所见，我已尝试 .select:focus，但在您 select 编辑您的选项后它仍保持在焦点上，并且它本身看起来很愚蠢，底部有方角。我也试过 .select:hover:focus 直到你的光标离开 select 元素并且样式规则不再适用。

P.S：深色模式下，--bg等于#222222，--text等于#FFFFFF 在轻模式下，它们分别等于#EEEEEE 和#000000。 P.P.S：我也试过 .select:focus:enabled 并且效果很好，但是一旦我 select 一个选项并且下拉列表消失，样式仍然有效。

Answer 1

据我所知，无法设置下拉菜单的样式。

但我认为有一种方法可以解决，那就是用一些 JavaScript 代码编写您自己的自定义下拉菜单。

您可以在这里查看原因：https://css-tricks.com/dropdown-default-styling/

希望对您有所帮助

有没有一种方法可以在 select 标签处于焦点状态时向其添加样式，并且还可以查看下拉列表

Is there a way to add styles to a select tag while it is in focus and also has the dropdown in view

html

css

frontend

styling

web