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

user_1031191 0
Viewed 52948

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?

contenteditable google-chrome css
4 Answers

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>

user_100873970 
.myClass:focus {
  outline-color: Highlight;
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: 1px;
}
user_16801470
Related