Was ist die Standard-Stil der Blaue Fokus-Gliederung in Chrome?

Ich habe eine webapp, die verwendet contenteditable div. Ich mag, wie Sie erscheinen in Chrome: wenn ich mich darauf konzentriere, Chrome zeigt eine schöne Blaue glühen um die div. Jedoch im Firefox bekomme ich eine hässliche gestrichelte Kontur.
Was ich beobachtet habe, so weit ist, dass Chrom hält auf die Anzeige der standardmäßigen blauen Rahmen, sobald ich die Gliederung der div:Fokus.
Ich würde gerne meine app konsequent schön Aussehen, also meine Frage ist

wie kann ich replizieren Chrome Standard-Stil für div[contenteditable="true"]:focus?

es ist eher hilfreich zu wissen, wie es zu finden: in devtools, Kraft :Fokus Stand auf das div, und die Stile

InformationsquelleAutor Barnabas Szabolcs | 2013-12-16

  1. 4

    Diese Geige gibt eine gute Näherung, können Sie anpassen möchten, um näher an, was du speziell nach obwohl.

    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;
}
    Vielen Dank, sieht toll aus! Ich lassen noch die Frage offen, da diese Bedürfnisse abgerundete Rahmen und nicht zu halten die ursprünglichen Grenzen.
    Szabolcs entfernen Sie einfach das styling für die Grenzen...
    Die einfachste Sache wäre, einfach die div[contenteditable=true]:focus Klasse vor. Aber es wird nur funktionieren, wenn das ursprüngliche element hat eine Grenze angegeben, sonst hat es nichts zu ändern.
    das wird nicht funktionieren, auf ein element overflow: hidden, denn der Schatten wird berücksichtigt, werden überflutet.

    InformationsquelleAutor SW4

Schreibe einen Kommentar