46

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?

Barney Szabolcs
  • 11,846
  • 12
  • 66
  • 91
  • 1
    it's more helpful to know how to find it: in devtools, force :focus state on the div, and see the styles – caub Aug 03 '16 at 18:24

5 Answers5

78

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;
}
<input class="myClass" />

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!

KTibow
  • 495
  • 6
  • 18
Oli Studholme
  • 2,600
  • 22
  • 16
6

This fiddle gives a good approximation, you may want to tweak to get closer to what you're specifically after though.

HTML

<div contenteditable='true'>Edit Me</div>

CSS

div[contenteditable=true] {
    width:200px;
    border:2px solid #dadada;
    border-radius:7px;
    font-size:20px;
    padding:5px;
    margin:10px;    
}

div[contenteditable=true]:focus { 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}
SW4
  • 69,876
  • 20
  • 132
  • 137
  • Thanks, that looks great! I still leave the question open, since this needs rounded borders and does not keep the original borders. – Barney Szabolcs Dec 16 '13 at 11:43
  • 1
    The simplest thing would be to just use the `div[contenteditable=true]:focus` class above. Though it will only work if the original element has a border specified otherwise it has nothing to change. – SW4 Dec 16 '13 at 11:46
  • this will not work on an element that has `overflow: hidden`, because the shadow will be considered be overflowed. – ncubica Apr 13 '18 at 19:44
5

I think I've found the perfect one, At least for me:

// Beggin
button {
  outline: 5px auto rgba(0, 150, 255, 1);
  -webkit-outline: 5px auto rgba(0, 150, 255, 1);
  -moz-outline: 5px auto rgba(0, 150, 255, 1);
  -ms-outline: 5px auto rgba(0, 150, 255, 1);
  -o-outline: 5px auto rgba(0, 150, 255, 1);
  /* Use a border to apply the outline */
  border: 1px solid rgba(0, 0, 0, 0);
  
  /* Unimortant styling: */
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
}
<button type="button"">Outline</button>
Michael Dodd
  • 10,102
  • 12
  • 51
  • 64
codeWithMe
  • 852
  • 12
  • 17
  • 3
    Welcome to Stack Overflow! Please do not vandalize your posts. By posting on Stack Overflow, you've granted a non-revocable right for SO to distribute that content under the [CC BY-SA 3.0 license](https://creativecommons.org/licenses/by-sa/3.0/). By SO policy, any vandalism will be reverted. – iBug Jul 16 '18 at 13:05
0
.myClass:focus {
  outline-color: Highlight;
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: 1px;
}
Pbinder
  • 452
  • 1
  • 6
  • 24
0

For Tailwind users, it's different, testing on ^3.1.8. Tailwind override the default focus color.

enter image description here

John Miller
  • 388
  • 2
  • 8
  • 23