是否有一种方法可以在选择标记处于焦点状态并且在视图中具有下拉菜单时为其添加样式

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:hover:focus，直到光标离开select元素并且样式规则不再适用为止。

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

Answer 1

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

但是我认为有一种解决方法，这是通过使用一些JavaScript代码编写您自己的自定义下拉菜单。

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

希望有帮助