css - tool - ¿Cuál es el estilo predeterminado del contorno de enfoque azul en Chrome?

guardar cambios css chrome

Question

Tengo una aplicación web que utiliza divs contenteditable. Me gusta cómo aparecen en Chrome: cuando me enfoco, Chrome muestra un bonito brillo azul alrededor del div. Sin embargo, en Firefox tengo un contorno feo y punteado. Lo que observé hasta ahora es que Chrome deja de mostrar su marco azul predeterminado una vez que cambio el contorno de div: focus. Me gustaría que mi aplicación se vea bien, así que mi pregunta es

¿Cómo puedo replicar el estilo predeterminado de Chrome para div[contenteditable="true"]:focus ?

Answer 1

Creo que he encontrado la perfecta, al menos para mí:

// 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>

Answer 2

Para responder a la pregunta, los navegadores Webkit utilizan el outline: 5px auto -webkit-focus-ring-color; . En Macs -webkit-focus-ring-color es rgb(94, 158, 214) azul rgb(94, 158, 214) (o #5E9ED6 ), pero en Windows y Linux es rgb(229, 151, 0) gold rgb(229, 151, 0) (o #E59700 ) ( ref ).

Si bien entiendo su deseo de consistencia, los usuarios generalmente solo usan un navegador y están acostumbrados a los estilos predeterminados de su navegador. Tenga en cuenta que a menos que planee cambiar cada instancia de :focus , terminará con inconsistencias para, por ejemplo, usuarios de teclado. Pros y contras eh!

Si define los estilos de outline y desea "volver" a los estilos predeterminados de User Agent en :focus , esto ayudará

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

El color de -webkit -prefix significa que FF, IE y Edge ignorarán la segunda regla y utilizarán la primera. Chrome, Safari y Opera utilizarán la segunda regla.

HTH!

Answer 3

Sin fiddle este fiddle ofrece una buena aproximación, es posible que desee modificar para acercarse a lo que está específicamente buscando.

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;
}