Skip to content
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 forced default focus outline #19935

Closed
wants to merge 1 commit into from
Closed

Conversation

@patrickhlauke
Copy link
Member

patrickhlauke commented May 19, 2016

the current outline: thin dotted that is forced as "default" is not in fact default in Firefox/OS X; forcing it leads to unsightly dotted outline that's non-standard for the browser/platform.

removing it seems to have no adverse effect in other all situations where this mixin is used (buttons, scaffolding for general link styles, and the case of forms). attempted to use outline: initial at first, but this seems somehow broken in Firefox (ends up removing standard Firefox dotted outline on links).

This is mostly a bug-fix, rather than a new feature (hence targetting it for v3)

Closes #19933

As this causes non-standard dotted outline on checkboxes/radio buttons
in Firefox/OSX
@patrickhlauke patrickhlauke added this to the v3.3.7 milestone May 19, 2016
@patrickhlauke patrickhlauke added the css label May 19, 2016
@patrickhlauke
Copy link
Member Author

patrickhlauke commented May 19, 2016

/cc @cvrebert @mdo for review. related to #19708 (which is v4)

@cvrebert
Copy link
Member

cvrebert commented May 19, 2016

Any adverse effect on IE or Win Firefox?

@patrickhlauke
Copy link
Member Author

patrickhlauke commented May 19, 2016

will post some screenshots in a bit, but generally: no adverse effect (though subtly different, checkboxes, tabs - in navs - etc all still have a good focus indication)

@patrickhlauke
Copy link
Member Author

patrickhlauke commented May 19, 2016

some before/after shots.

for IE11, removing that explicit outline effectively brings the outline back to its natural look (i.e. links, buttons and checkboxes do have that particular outline normally)

ie11

for Firefox/Windows, the notable change is that <button> elements now have no forced outline - however, this is in line with general Firefox behavior once a particular :focus style has been set (FX won't show default dotted outline - though it would show an inner dotted outline around the actual text, which is suppressed by normalize.css). I'd argue it's still distinctive enough, though could be stronger...

fx

@patrickhlauke
Copy link
Member Author

patrickhlauke commented May 25, 2016

@mdo @cvrebert thoughts on this?

@cvrebert cvrebert added the v3 label Jul 8, 2016
@cvrebert cvrebert closed this in c3c089b Jul 9, 2016
cvrebert added a commit that referenced this pull request Jul 12, 2016
As this causes non-standard dotted outline on checkboxes/radio buttons
in OS X Firefox

Ports #19935 to v4
Refs #19933

[skip sauce]
@cvrebert
Copy link
Member

cvrebert commented Jul 12, 2016

Ported to v4 in #20275.

twbs-savage pushed a commit to twbs-savage/bootstrap that referenced this pull request Jul 12, 2016
As this causes non-standard dotted outline on checkboxes/radio buttons
in OS X Firefox

Ports twbs#19935 to v4
Refs twbs#19933

[skip sauce]
chiraggmodi pushed a commit to chiraggmodi/bootstrap that referenced this pull request Apr 8, 2019
As this causes non-standard dotted outline on checkboxes/radio buttons
in OS X Firefox

Fixes twbs#19933
Closes twbs#19935

[skip sauce]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

2 participants
You can’t perform that action at this time.