Wie kann ich den Umriss-Stil des Standard-Chrome-Eingangs (im Fokus, der orangefarbene) festlegen, sodass er in jedem Browser gleich aussieht? Chrome-Stil scheint textarea:focus{outline: rgb(229, 151, 0) auto 5px; outline-offset: -2px} zu sein, aber es funktioniert nicht (es gibt keine auto für outline-style für andere Browser).Kopieren des Umrissstils des Standard-Chrome-Eingangs
Versuchen Sie es hier:
Browsers' default CSS for HTML elements
Sie haben dort die Standard-CSS von Google Chrome. Ich bin mir sicher, dass der Stil dort definiert wird.
S.S .: Sie werden wollen Chrome/Safari (WebKit).
In meiner Frage habe ich bereits den Chrome-Stil gepostet und darauf hingewiesen, dass es in anderen Browsern nicht funktioniert. – geehertush01
Vielleicht können Sie Stylesheets anderer Browser mit '! Wichtig' überschreiben? – Ivozor
Es wird nichts ändern. Es scheint, dass Chrome einige spezielle Einstellungen hat, die mit CSS nicht erreicht werden können. Wie ich bereits sagte, verwendet es "auto" als "Umriss-Stil" und es hat keine Bedeutung für andere Browser. – geehertush01
Wenn Sie ein Eingabe-Tag mit dem in Chrome geöffneten Stilfenster überprüfen, sollten die standardmäßigen Stylesheet-Eigenschaften des Benutzeragenten angezeigt werden. Verwenden Sie den Farbwähler in den Webentwickler-Tools oder das Chrome Color Picker-Plugin, um den rgb-Wert zu erhalten.
In meiner Frage habe ich bereits den Chrome-Stil gepostet und darauf hingewiesen, dass es in anderen Browsern nicht funktioniert. – geehertush01
Dann werden Sie zu fälschen müssen den Effekt, den Sie mit anderen CSS-Optionen oder eine Variation auf [Textarea Tricks] (http://css-tricks.com/textarea-tricks/) – bitmapshades
Weiß nicht, ob meine Lösung für Sie gut genug ist, aber so weit, ich weiß nicht, auf andere Weise ... Ich mache es wie folgt aus:
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;
}
+1 suchen zu erreichen. Dies ist das Ergebnis, das Sie in anderen Browsern am ehesten erreichen können. Fiedeln Sie ein wenig mit der Rahmenfarbe und der Schattentransparenz und es kann sich sehr ähnlich sehen. – Zilk
Sie können nicht, Ja wirklich.
Chrome verwendet den 'automatischen' Outline-Stil (was auch immer das bedeuten mag) und entspricht nicht den CSS3-Spezifikationen.
Ihre beste Option ist es, Ihren eigenen Highlight-Stil zu erstellen und (zumindest) den Umriss-Stil zu überschreiben. Auf diese Weise haben alle Browser dasselbe Fokuselement für Ihre Seite.
Kopieren der Chrome-Stil ist sehr schwer zu tun. Da CSS standardmäßig keine schattenähnliche Kontur unterstützt, werden nur feste, gestrichelte usw. Stile unterstützt. Sie müssen dies mit Box-Shadow nachahmen, dies führt jedoch aus irgendeinem Grund dazu, dass der Rahmen des Eingabefeldes (im eingesetzten Stil) angezeigt wird, was Sie zwingt, den Rand des Eingabefeldes zu definieren.
Sie könnten so etwas wie dies zum Beispiel tun:
input:focus {
box-shadow: 0px 0px 8px blue;
outline-style: none;
}
input {
border: 1px solid #999;
}
outline-color: rgb(77, 144, 254); // #4D90FE
outline-offset: -2px;
outline-style: auto;
outline-width: 5px;
konvertieren zu diesem
input:focus {
outline:none;
border:1px solid #4D90FE;
-webkit-box-shadow: 0px 0px 5px #4D90FE;
box-shadow: 0px 0px 5px #4D90FE;
}
Mit Chrome 60 ist der Umriss jetzt blau.
Der automatische Umrissstil erstellt einen Umriss mit einem Pixel, wobei die Ecken "gekerbt" sind.
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 sich die Rahmenfarbe:
Dieses vor und nach Regeln wie so :: Verwendung :: erreicht werden.
Die zweite Regel bietet einen oberen und unteren Rand, der links von einem Pixel beginnt und rechts von einem Pixel endet.
Die thirder Regel stellt eine linke und die rechte Grenze, die man von oben nach unten beginnt und endet ein Pixel von unten nach oben.
CAVEAT: das Aufnahmeelement muss explizit sein „position: relative“, um für die :: vor/:: nach absoluter Positionierung zu arbeiten.
Der Klassenname „Someclass-Fokus“ ist sinnlos ... es muss nur entfernt an/werden, wenn Sie den Pseudo-Fokus Umriss erscheinen/verschwinden wollen.
Überprüfen Sie meine Antwort. Hoffe, dass es hilft. ;) –
Haben Sie darüber nachgedacht, dass die Nutzer von anderen Browsern ihren Browser wie den Browser normalerweise der Fall ist auf Fokus, und dass ihre Erfahrung nicht unbedingt gehen zu verbessern, indem eine bestimmte Stelle plötzlich benimmt sich wie Chrome tut zu handeln erwarten? –