使用chrome时，如果未展开，则会在下拉列表中显示蓝色边框

Question

我在表单中有一个下拉菜单，但在关闭下拉菜单并使用Chrome时，它会显示一个蓝色边框。 我想将其删除或将其更改为我在附图中显示的最后一个字段，带有浅绿色光环的深绿色线。

我已经尝试了几个我在这里看到的建议：

 *:active{
     outline: none !important;
 }
 *:focus{
    outline: none !important;
 }

它们在下拉列表扩展时工作但在关闭时不起作用。 我不太了解css，但这里是我的html的摘录，虽然我使用的是wicket，但我不确定该组件是如何在浏览器html中呈现的。

<div class="col-sm-4">
    <span><label class="control-label" wicket:for="valid"><wicket:message
                                key="filter-valid-label">[Valid]
    </wicket:message></label></span>
    <select wicket:id="valid" class="form-control selectpicker">
            <option>option1</option>
            <option>option2</option>
            <option>option3</option>
    </select>
</div>

Answer 1

这可能与bootstraps有关：专注于.form-control

这是来自bootstrap的css

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

使用

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

Answer 2

在CSS代码中的任意位置添加此内容，将rgba(0,100,0,.6)替换为您喜欢的任何绿色阴影：

.form-control.selectpicker:focus {
    border-color : rgba(0,100,0,.6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,100,0,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0,100,0,.6);
}

它将覆盖.form-control:focus上的引导代码，该代码负责下拉列表中的蓝色border-color和box-shadow！

请参阅this Fiddle了解演示！

Answer 3

试试这个：

.form-conrol:focus{box-shadow:none:border-color:none;}