Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the default style of the blue focus outline in Chrome?

I have a webapp that uses contenteditable div's. I like how they appear in Chrome: when I focus, Chrome displays a nice blue glow around the div. However in Firefox I get an ugly dashed outline. What I observed so far is that Chrome stops displaying its default blue frame once I change the outline of div:focus. I'd like to make my app consistently look nice, so my question is

how can I replicate Chrome's default style for div[contenteditable="true"]:focus?

like image 366
Barney Szabolcs Avatar asked Dec 16 '13 11:12

Barney Szabolcs


People also ask

What is the default focus CSS?

Chrome Focus StylesThe first button is the default focus style in Chrome. We can see it blends in with the button. The second button shows a custom style that makes the outline larger but still blends in. We could change the color but will have to maintain multiple colors for each button color we may provide.

Should I use focus visible?

Based on lots of feedback and study, browsers have long employed heuristics about both the type of element, and how it came to gain focus, in order to determine whether the focus indicator should be displayed. If the user is navigating the page with the keyboard, it should.


1 Answers

To answer the question, Webkit browsers use outline: 5px auto -webkit-focus-ring-color;. On Macs -webkit-focus-ring-color is blue rgb(94, 158, 214) (or #5E9ED6), but on Windows and Linux it’s gold rgb(229, 151, 0) (or #E59700) (ref).

While I understand your desire for consistency, users generally only use one browser, and are used to their browser’s default styles. Note that unless you plan to change every instance of :focus you’ll end up with inconsistency for e.g. keyboard users. Pros and cons eh!

If you define outline styles and want to ‘revert’ back to the default User Agent styles on :focus, this will help

.myClass:focus {    outline: 1px dotted #212121;    outline: 5px auto -webkit-focus-ring-color;  }

The -webkit-prefix color means FF, IE and Edge will ignore the second rule and use the first. Chrome, Safari and Opera will use the second rule.

HTH!

like image 63
Oli Studholme Avatar answered Oct 14 '22 17:10

Oli Studholme