Question

我正在尝试从引导多重选择中删除选择框选项的边框颜色，但是无法找到在选项边框周围添加蓝色的任何类。

单击选项或将其聚焦时会出现此边框，这是我尝试过的

HTML

<body>
    <select size="5" name="lstStates" multiple="multiple" id="lstStates">
        <option value="NJ">New Jersey</option>
        <option value="NY">New York</option>
        <option value="OH">Ohio</option>
        <option value="TX">Texas</option>
        <option value="PA">Pennsylvania</option>
        <option value="GG">asdfa</option>
        <option value="AW">jghjh</option>
        <option value="AE">qwer</option>
    </select>   
</body>

jquery

$(function () { 
    $('#lstStates').multiselect({ 
        buttonText: function(options, select) {
            console.log(select[0].length);
            if (options.length === 0) {
                return 'None selected';
            }
            if (options.length === select[0].length) {
                return 'All selected ('+select[0].length+')';
            }
            else if (options.length >=10) {
                return options.length + ' selected';
            }
            else {
                var labels = [];
                console.log(options);
                options.each(function() {
                    labels.push($(this).val());
                });
                return labels.join(', ') + '';
            }
        }

    });
});

css

.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {
    color: #20262e;
    text-decoration: none;
    background-color: rgba(255,255,255,0.15);
    outline: 0;
}

.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: #262626;
    text-decoration: none;
    background-color: rgba(255,255,255,0.15);
}

FIDDLE

Answer 1

蓝色是由用户代理样式表引起的：

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

您可以使用以下选项在其下拉菜单中覆盖它：

ul.multiselect-container li a:focus
{
    outline-color: white;
}

更新的小提琴：http://jsfiddle.net/76wdfrbm/

Answer 2

我添加了轮廓：0；到.dropdown-menu> li> a：hover，.dropdown-menu> li> a：focus并有效

 .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
    color: #262626;
    text-decoration: none;
    background-color: rgba(255,255,255,0.15);
}

Answer 3

请在您的代码中添加此CSS：

.dropdown-menu>li>a label:focus{outline: none}
.dropdown-menu>li>a:focus{outline: none}

Answer 4

默认情况下，浏览器使用此样式

  :focus {
    outline: -webkit-focus-ring-color auto 5px;
}

您可以覆盖元素

.multiselect-container>li>a>label.checkbox:focus{
    outline:0 !important;
 }

Answer 5

尝试

<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.d.ts</script>
<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.d.ts.map</script>
<script>https://cdn.jsdelivr.net/npm/lit-html@0.13.0/lit-html.js.map</script>

这将删除焦点边框

Answer 6

您应使用以下样式：

<style>
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
outline:none;
}
</style>

如何删除boostrap多选边框颜色

6 个答案: