web-dev-qa-db-fra.com

Quel est le style par défaut du contour de mise au point bleu dans Chrome?

J'ai une webapp qui utilise des divs modifiables. J'aime leur apparence dans Chrome: lorsque je me concentre, Chrome affiche une belle lueur bleue autour du div. Cependant, dans Firefox, j'obtiens un contour en pointillés laid. Ce que j'ai observé jusqu'à présent, c'est que Chrome cesse d'afficher son cadre bleu par défaut une fois que j'ai changé le contour de div: focus. J'aimerais que mon application soit toujours belle, donc ma question est

comment puis-je répliquer le style par défaut de Chrome pour div[contenteditable="true"]:focus?

cssgoogle-chromecontenteditable
25
Barnabas Szabolcs

Pour répondre à la question, les navigateurs Webkit utilisent outline: 5px auto -webkit-focus-ring-color;. Sur Mac, -webkit-focus-ring-color Est bleu rgb(94, 158, 214) (ou #5E9ED6), Mais sur Windows et Linux c'est or rgb(229, 151, 0) (ou #E59700) ( réf ).

Bien que je comprenne votre désir de cohérence, les utilisateurs n'utilisent généralement qu'un seul navigateur et sont habitués aux styles par défaut de leur navigateur. Notez que sauf si vous prévoyez de modifier chaque instance de :focus, Vous vous retrouverez avec une incohérence, par exemple utilisateurs de clavier. Avantages et inconvénients hein!

Si vous définissez des styles outline et que vous souhaitez "revenir" aux styles d'agent utilisateur par défaut sur :focus, Cela vous aidera.

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

La couleur de préfixe -webkit Signifie FF, IE et Edge ignorera la deuxième règle et utilisera la première. Chrome, Safari et Opera will utilisez la deuxième règle.

HTH!

39
Oli Studholme

Ce ( violon donne une bonne approximation, vous voudrez peut-être Tweak pour vous rapprocher de ce que vous recherchez spécifiquement.

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

Je pense que j'ai trouvé le parfait, au moins pour moi:

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