Modal focus highlight remains on element after closing modal window - css

Question

I have a modal set up, using Bootstrap, which is working just fine. The modal brings up some text and an image. When I hover on the modal element, a button, there is a nice blue highlight that pops up, I'd like to keep that. The issue is, when I close the modal window the blue highlight stays on the button, I'd like to get rid of this.
I thought this CSS...
.modal-open .modal,
.btn:focus{
outline: none !important;
}
...would remove the highlight, but it I'm still left with the blue highlight after I close the modal. The following is the code for the modal...
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Some Title</h4>
</div>
<div class="modal-body">
<p>Some text about something, Some text about something, Some text about something.</p>
<a href='http://codepen.io'><img src='http://lorempixel.com/g/400/200'></a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Thanks in advance for any assistance.

Answer 1

This is by design and is important for accessibility. On close, modals should return focus to launching element. If the button wouldn't get it's focus back it would break keyboard/tabbed accessibility. Please refer to this github issue.
If you want to remove the glow, or blue "highlight" i recommend toggling an extra CSS class on modal show/hide. For example:
<button id="openButton" type="button" class="btn btn-info btn-lg btn-no-highlight" data-toggle="modal" data-target="#myModal"><img src='http://lorempixel.com/g/400/200'></button>
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
$('#myModal').on('shown.bs.modal', function (e) {
$('#openButton').toggleClass('btn-no-highlight');
});
});
.btn.btn-no-highlight {
background-color: #5bc0de;
border-color: #46b8da;
outline: none !important;
}
I have created a fiddle to demonstrate this: https://jsfiddle.net/e61r4ba3/

Answer 2

Try using this
$('#myModal').on('shown.bs.modal', function(e){
$('#myModaltrigger').one('focus', function(e){$(this).blur();});
});