Bootstrap: Remove dotted outline border on Firefox and background color after item selected in IE

[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;
}

[cvrebert]

Also in IE and Edge when item selected from<select> it has blue background color and white text color

Does that match the appearance of pull-down menus in native apps on the relevant version of Windows? <select>s are supposed to match the underlying platform. If you don't want them to look native, then you want something like http://v4-alpha.getbootstrap.com/components/forms/#select-menu

[Mevrael]

If you don't want them to look native,

I am keeping native version but when only one platform is changing colors especially when they don't fit into design, I wouldn't say it's a customization but reset. If input bg color is xyz I want to keep it xyz when item selected from list and dropdown closed like in any other browser.

Can't say 100% about native apps.

[cvrebert]

X-Ref: #17006
CC: @patrickhlauke regarding Firefox focus styles

[patrickhlauke]

Regarding the Firefox focus styles, in general you _don't_ want to explicitly suppress focus outline, as that's required for accessibility (notably, for sighted keyboard users) unless there's a very clear alternative indication of :focus. As this is not always the case, doing an indiscriminate outline: none is simply bad form. However, in #19708 I'm aiming to remove it for .btn and pagination links, which seem the most common cases that cause unsightly issues (see https://github.com/twbs/bootstrap/issues/18650)

[patrickhlauke]

As for the issue of <select> in IE and Edge, I agree that this behavior is unsightly and would generally fall - to my mind anyway - into the kind of "normalisation" we adopt for other aspects of form controls. I will propose an addition to the Bootstrap styles specifically for that in a separate PR.

[patrickhlauke]

For reference, focusing on a <select> in IE (and, under certain situations, Edge...though it's not quite apparent what the logic for Edge is - possibly based on heuristics?) compared to Chrome and Firefox. Note the white text on blue background IE adds to the selected value (this taken directly from http://v4-alpha.getbootstrap.com/components/forms/#select-menu)

with the proposed select:focus::-ms-value override, this is normalised (disregard the difference in border radius - this is due to other changes that happened in v4 since alpha 2)

[cvrebert]

Keyboard-focused native Win10 dropdown menu widget for comparison:

[patrickhlauke]

taking a step back, are you suggesting this should be applied to .c-select rather than <select> directly?

[cvrebert]

Having done some more testing, yeah. Vanilla <select> already looks acceptable without this fix, it's .c-select and (perhaps) select.form-control which look a bit off.

[patrickhlauke]

done https://github.com/twbs/bootstrap/pull/19714

[patrickhlauke]

Lost track here...can this be closed/is it addressed sufficiently?