如何应用 css 样式来选择焦点？答案

【问题标题】：how can I apply css style to select focus?如何应用 css 样式来选择焦点？
【发布时间】：2019-12-11 05:16:25
【问题描述】：

我有一个选择输入字段，我想在该字段为焦点时应用颜色，但不工作。

我正在尝试将此 css 应用于 Angular 组件，它适用于其他输入字段，例如：

input[type='text']:focus{
border-color:red;
}

但同样不适用于选择

select:focus{
border-color:red;
box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px #5e9b1f;
outline: 0 none;
}

选择下拉菜单应该像文本字段一样获得边框颜色。

【问题讨论】：

【解决方案1】：

它正在工作，但由于轮廓，您看不到边框

 select:focus {
     border-color:red;
     outline:none;
}

【讨论】：

【解决方案2】：

.select div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

【讨论】：