html - CSS 伪类 :focus trouble with multiple select on Google Chrome

Question

我正在尝试设置 <select multiple>'s 的样式:focus 伪类，但在谷歌浏览器上，当我点击第一个元素时，焦点似乎没有触发。在第一个元素仍然聚焦的情况下，如果我点击任何其他元素，它似乎会触发，但不会播放过渡。

如果选择通过任何其他方式获得焦点(点击除第一个元素以外的任何元素，甚至点击滚动条)，焦点动画似乎正常触发。

html:

<select id="slt" class="selectInput" multiple>
    <option value="">
        --SELECT AN OPTION--
    </option>
    <option value="ALL">
        --ALL--
    </option>
    <option value="1">
        ONE
    </option>
    <option value="2">
        TWO
    </option>
    <option value="3">
        THREE
    </option>
    <option value="4">
        FOUR
    </option>
</select>

CSS:

.selectInput
{
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #02659B 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #02659B 4%);
    background-position: -250px 0;
    background-repeat: no-repeat;
    background-size: 250px 100%;
    border: none;
    border-bottom: solid 1px #0083CA;
    color: #0e6252;
    margin: 0px 25px 10px 0px;
    width: 250px;

    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}

.selectInput:focus
{
    background-position: 0 0;
    box-shadow: none;
    outline: none;
}

Answer 1

你好 paulie D 我在我的 chrome 浏览器上试过了，它运行得很好。当您在第一个元素仍被选中时单击另一个元素时它没有播放过渡的原因是因为过渡发生在 SELECT 元素上，当它聚焦时发生，并且因为您仍在选择 SELECT 元素的特定元素( option 元素)这意味着焦点仍在 SELECT 元素上，因此您不会注意到转换。