将 ~(代字号)与逗号一起使用时的 CSS 意外行为

Question

我正在尝试构建一个具有可能选项下拉列表的输入字段，但该下拉列表应该仅在输入处于“事件”状态 (:active) 时显示。

这是一个看起来如何的例子:

.country-input:active ~ .country-dropdown.active{
    background-color: white;
    display: block;
    position: absolute;
    padding: 5px;
    cursor: pointer;
}

(country-input 是输入框，country-dropdown 是下拉框。)

问题是，一旦我尝试单击按钮来选择一个元素，输入字段就会失去其事件状态，因此下拉菜单会在我能够单击之前隐藏。

所以我将选择器更改为以下内容:

.country-input:active ~ .country-dropdown.active, .country-input ~ .country-dropdown:hover

但现在只有在输入字段内按下鼠标时才会显示下拉列表。

Answer 1

用 :focus 替换 :active 就成功了，因为后者在元素处于焦点(duh)时切换，而对于输入字段，当可以写入它(当它被选中时)。