New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove dotted outline border on Firefox and background color after item selected in IE #19398

Closed
Mevrael opened this Issue Mar 4, 2016 · 11 comments

Comments

Projects
None yet
3 participants
@Mevrael
Copy link

Mevrael commented Mar 4, 2016

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

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 4, 2016

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

This comment has been minimized.

Copy link

Mevrael commented Mar 4, 2016

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

This comment has been minimized.

Copy link
Member

cvrebert commented Mar 4, 2016

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

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented Apr 11, 2016

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 #18650)

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented Apr 11, 2016

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 patrickhlauke self-assigned this Apr 11, 2016

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented Apr 11, 2016

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)

select-ie

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)

select-ie-after

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 11, 2016

Keyboard-focused native Win10 dropdown menu widget for comparison:
native-select-focus-crop

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented Apr 11, 2016

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Apr 11, 2016

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

This comment has been minimized.

Copy link
Member

patrickhlauke commented Apr 11, 2016

done #19714

@patrickhlauke

This comment has been minimized.

Copy link
Member

patrickhlauke commented May 25, 2016

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment