How to remove boostrap multiselect border color

Question

I am trying to remove border color from options of a select box from bootstrap multiselect, but unable to find any class which is adding a blue color around the border of the options.

This border comes when you click on the option or you put it into focus, here is what I have tried

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

http://www.outlinenone.com/ By removing this you're actively making your site less accessible. — Roope, Nov 23 '18 at 12:56
See If this question answered your problem. https://stackoverflow.com/questions/492627/change-border-color-on-select-html-form — Subramaniam Chintamani, Nov 23 '18 at 12:56
Possible duplicate of [How to remove the border highlight on an input text element](https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) — Smollet777, Nov 23 '18 at 12:59

score 4 · Accepted Answer · answered Nov 23 '18 at 13:02

The blue is caused by the user-agent stylesheet:

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

you can override it just on your dropdown with:

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

Updated fiddle: http://jsfiddle.net/76wdfrbm/

score 0 · Answer 2 · answered Nov 23 '18 at 13:02

0

I added outline: 0; to .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus and it worked

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

answered Nov 23 '18 at 13:02

saurabh kumar

45
1
10

score 0 · Answer 3 · answered Nov 23 '18 at 13:02

0

Please add this CSS in your code:

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

answered Nov 23 '18 at 13:02

Joykal Infotech

1,840
3
9
17

score 0 · Answer 4 · answered Nov 23 '18 at 13:03

0

by default, the browser use this style

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

you can override the elements

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

answered Nov 23 '18 at 13:03

Fahd Allebdi

354
4
7

score 0 · Answer 5 · answered Nov 23 '18 at 13:04

0

try this

a,a:focus{
    outline:none;
}

this will remove focus border

answered Nov 23 '18 at 13:04

Abdulsattar Alkhalaf

394
1
6

score -1 · Answer 6 · answered Nov 23 '18 at 13:06

-1

you should apply below style:

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

answered Nov 23 '18 at 13:06

AddWeb Solution Pvt Ltd

21,025
5
26
57

How to remove boostrap multiselect border color

6 Answers6