it-swarm.com.de

Kopieren Sie den Gliederungsstil der Chrome-Standardeingabe

Wie kann ich den Umrissstil der Standard-Chrome-Eingabe festlegen (auf den orangefarbenen Fokus), damit er in jedem Browser gleich aussieht? Der Chrome-Stil scheint textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px} zu sein, funktioniert jedoch nicht (es gibt keine auto für outline-style für andere Browser).

23
geehertush01

Standard-Chrome-Gliederungsstil:

outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;

konvertieren Sie dies 

 input:focus {
     outline:none; 
     border:1px solid #4D90FE;
     -webkit-box-shadow: 0px 0px 5px  #4D90FE;
     box-shadow: 0px 0px 5px  #4D90FE;
 }

Ich weiß nicht, ob meine Lösung für Sie gut genug ist, aber bis jetzt kenne ich keinen anderen Weg.

textarea:focus
{
    outline:none; /*or outline-color:#FFFFFF; if the first doesn't work*/
    border:1px solid #48A521;
    -webkit-box-shadow: 0px 0px 4px 0px #48A521;
    box-shadow: 0px 0px 4px 0px #48A521;
}
9
Jo Smo

Das kannst du wirklich nicht. 

Chrome verwendet den "automatischen" Umrissstil (was auch immer das bedeuten mag) und entspricht nicht den CSS3-Spezifikationen.

Die beste Option ist, Ihren eigenen Highlight-Stil zu erstellen und (und zumindest) den Umriss-Stil zu überschreiben. Auf diese Weise haben alle Browser das gleiche Fokuselement für Ihre Seite. 

Das Kopieren des Chromstils ist sehr schwierig. Da css standardmäßig keine schattenähnliche Kontur unterstützt, werden nur durchgezogene, gestrichelte usw. Stile unterstützt. Sie müssen es mit box-shadow nachahmen. Dies führt jedoch aus irgendeinem Grund dazu, dass der Rand des Eingabefelds (in Inset-Stil) angezeigt wird, wodurch Sie den Rand des Eingabefelds definieren müssen.

Sie könnten zum Beispiel so etwas tun:

input:focus {
  box-shadow: 0px 0px 8px blue;
  outline-style: none;
}
input {
  border: 1px solid #999;
}

http://jsfiddle.net/dstibbe/2wr0pge2/2/

0
dstibbe

Bei Chrome 60 ist der Umriss jetzt blau. 

Der automatische Umrissstil erstellt eine Umrisslinie mit einem Pixel, wobei die Ecken "gekerbt" werden. 

Dies kann mit den Regeln :: before und :: after wie folgt erreicht werden:

DIV.someclass--focus {
    outline:none; 
    border: 1px solid #86A8DF !important;
}
DIV.someclass--focus::before {
    position:absolute;
    margin-top:-2px;
    margin-bottom: -2px;
    margin-left: -1px;
    margin-right: -1px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: none;
    border-right: none;
    border-top: 1px solid #A6C8FF;
    border-bottom: 1px solid #A6C8FF;
}
DIV.someclass--focus::after {
    position:absolute;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -2px;
    margin-right: -2px;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    content: ' ';
    border-left: 1px solid #A6C8FF;
    border-right: 1px solid #A6C8FF;
    border-top: none;
    border-bottom: none;
}

Die erste Regel ändert die Rahmenfarbe.

Die zweite Regel bietet einen oberen und einen unteren Rand, der ein Pixel von links beginnt und ein Pixel von rechts endet.

Die Dreierregel stellt einen linken und einen rechten Rand bereit, der von oben nach unten beginnt und ein Pixel von unten her endet.

CAVEAT: Das enthaltende Element muss explizit "position: relative" sein, damit die :: before/:: nach der absoluten Positionierung funktionieren kann.

Der Klassenname "someclass-focus" ist bedeutungslos ... er muss nur angewendet/entfernt werden, wenn die Pseudofokus-Kontur erscheinen soll oder verschwinden soll.

0
user2845090