如何将 css 样式应用到 select 焦点？

Question

我有一个 select 输入字段，我想在该字段获得焦点时应用颜色，但不起作用。

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

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

但同样不适用于 select

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

select 下拉菜单应该像文本字段一样具有边框颜色。

Answer 1

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

Answer 2

它工作正常，但由于轮廓你看不到边框

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

how can I apply css style to select focus?