Remove dotted outline border on Firefox and background color after item selected in IE
Created by: Mevrael
There are many normalizers, resets and bs4 also uses ones, however, I still have to reset Firefox's dotted outline borders when clicking on buttons, links, etc and don't understand why for so many years those normalizers aren't doing it.
I would suggest to add it to bs3/bs4 core/reset styles:
// remove dotted outline/border in Firefox
button:focus,
a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
outline: none !important;
}
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Also in IE and Edge when item selected from <select>
it has blue background color and white text color while all other browsers keep using inputs css styles, I've added this to reset it:
select:focus::-ms-value {
background-color: $input-bg;
color: $input-color;
}