I have a custom bootstrap button and I cannot remove its border after click. I was able to change its background color but there is an insistent blue border boring me.
I click on it, it opens a modal window and after closing the modal the border is still there until I click on another part of the page even if I change values in :active
and :focus
.
html:
<button id="openPopup" type="button" class="btn btn-primary btn-lg text-uppercase" data-toggle="modal" data-target="#myModal">
some text here
</button>
css:
#openPopup {
padding: 20px 30px;
background-color: #a2238e;
border-color: #a2238e;
box-shadow: 1px 1px 1px #999;
white-space: normal;
font-size: smaller;
letter-spacing: 0.2px;
}
#openPopup:hover, #openPopup:active, #openPopup:focus {
background-color: #912284 !important;
border-color: #912284 !important;
}
Try this
#openPopup:focus {
outline: none;
}
or
#openPopup:focus {
outline: 0;
}