bootsa
bootsa

Reputation: 249

Blue outlines on bootstrap select

I have installed bootstrap-select and it all works fine, except that blue borders appear in 2 instances:

1) in the dropdown menu

enter image description here

2) when a new value is picked

enter image description here

Can someone please help how it can be fixed? I adjusted a few things already.

.bootstrap-select .btn {
  height: 43px;
  color: rgba(0, 0, 0, 0.5);
  background-color: white;
  border-radius: 3px;
}
.bootstrap-select .btn:focus {
  outline: none !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}

Upvotes: 2

Views: 4287

Answers (6)

legel
legel

Reputation: 2673

Adding this to the very bottom of my HTML was what finally worked for me on Chrome:

<style type="text/css">
    .bootstrap-select .dropdown-toggle:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    :focus {
      outline: none !important;
      box-shadow: none !important;
    }
</style>

I think the key was that I was loading Bootstrap and other libraries after setting the CSS.

Upvotes: 1

Gianluca Ghettini
Gianluca Ghettini

Reputation: 11648

apply those two css rules after all the other css styles

.bootstrap-select .dropdown-toggle:focus {
    outline: none!important;
}
:focus {
  outline: none!important;
}

Upvotes: 4

gleb
gleb

Reputation: 11

Add the css

.bootstrap-select.btn-group .dropdown-menu li a {
  outline: none;
}

Upvotes: 1

Hamid Behnam
Hamid Behnam

Reputation: 1010

Removing the blue outline around the element and items inside of it:

<style>
    .bootstrap-select .btn:focus {
        outline: none !important;
    }

    .selectpicker a {
        outline: 0;
    }
</style>

Tested on Chrome, Firefox and Opera.

Upvotes: 2

Nathan Peixoto
Nathan Peixoto

Reputation: 328

outline: 0;

Should fix it, if you target the correct item.

Upvotes: 1

Gofilord
Gofilord

Reputation: 6641

Try adding this to your css:

:focus {
  outline: none;
}

Upvotes: 0

Related Questions