Umriss: keine; funktioniert nicht - nur -webkit-aussehen: keine; funktioniert - was ist hier falsch?

Edit: Meine Bedenken sind für mobile Websites.Umriss: keine; funktioniert nicht - nur -webkit-aussehen: keine; funktioniert - was ist hier falsch?

Lassen Sie mich gleich auf den Punkt kommen. Egal was ich tue, Umriss: keine; löscht KEINE Standardhervorhebungen/-glühungen von Eingabeformularelementen mit einem Ipod Touch/Iphone.

Überall sehe ich, sagen die Leute zu verwenden:

input:focus { 
outline:none; 
}

oder

input { 
outline:none; 
}

.... und dass dies die Glut entfernen .... gut es funktioniert nicht.

Ein weiteres großes Problem ist, dass es keine Standard GLOW gibt. Ich erstelle eine leere Seite ohne Styling und nur eine Formulareingabe, schaue die Seite über IOS mobile an, und es gibt kein Leuchten/Umriss auf den Eingabeelementen ... es ist einfach leer.

Das einzige, was funktioniert, ist -webkit-aussehen: keine; - und das erlaubt mir einfach, einen Box-Schatten auf das Eingabeelement zu setzen. Wenn ich nicht das -webkit-Aussehen verwende: keine; - dann wird der Box-Schatten nicht richtig angezeigt.

Wenn Sie dies jedoch auf einem Desktop-Browser anzeigen, funktionieren die Box-Schatten auch ohne Webkit einwandfrei.

Also meine Frage ist: Warum ist Outline: keine; keinen Nutzen für Eingabeelemente haben? Ich habe gesehen, dass einige Leute sagen, dass sie nur an Anker-Tags arbeiten, während andere sagen, dass sie an Eingabeelementen arbeiten. Wer ist hier richtig? Bis jetzt, egal was ich tue, skizziere: keine; ist wertlos auf Eingabeelemente. Hier

ist ein JSfiddle:

http://jsfiddle.net/QQGnj/4/show/

Betrachten dieser Seite auf iOS Mobile, gibt es keine "glow" oder Standard-Styling zu beginnen. Wo sieht jeder das Standard-Glow-Verhalten, das eine Gliederung benötigt: none; arbeiten (was nicht)? Das macht mich verrückt!

Quelle

2012-07-04 Chatyak

Das Standardglühverhalten ist nicht auf Mobile Safari, sondern auf Safari (und Chrome und anderen Browsern). Also nein, es ist nicht wertlos auf '' Elemente. Und da Sie von Anfang an kein Glühen sehen, warum ist Ihre Frage "Warum hat es keinen Effekt?" Es hat keine Wirkung, weil es keine Gliederung an erster Stelle gibt, wie Sie sagen. Also ist das ein Schwindel, oder ist deine eigentliche Frage "Warum arbeitet' Box-Shadow' nicht an '' Elementen in mobilen Browsern "? Denn wenn es so ist, solltest du es sagen. – Ryan

Ich war mir nicht bewusst, dass das Leuchten Verhalten nicht in Mobile Safari war. Ich habe versucht, solche Informationen zu finden, wusste aber nicht, wo ich suchen sollte. Das wird dann eine Menge Frustration erklären. Mit anderen Worten, mit dem Umriss: keine; für mobile Anwendungen ist wertlos auf Eingabeelemente, aber für Desktop-Websites erfüllt es einen Zweck? – Chatyak

Um weiter zu klären - das einzige, was ich tun sollte dann für mobile Website desing auf Formularelemente zu tun, ist hinzufügen - Webkit-Aussehen: keine; (zusammen mit -moz-aussehen usw ..) um alle Standard-Styling zu entfernen .... oder eine andere Art es zu sagen ... Gliederung: keine; hat keinen Zweck für Formularelemente in mobilen Browsern? – Chatyak

Mobile Safari hat anscheinend einfach keinen Standard outline Stil, so dass Sie sich keine Sorgen machen müssen. Für ein garantiert konsistentes Aussehen in allen Browsern, Desktops und mobilen Geräten, würde ich trotzdem empfehlen, outline: none einzustellen.

Quelle

2012-07-04 23:01:27 Ryan

a, :visited{ 
    outline: 0; 
    outline: none; 
} 
:hover, :active, :focus{ 
    outline: 0; 
    outline: none; 
}

entfernt, um das fokussierte Glühen für mich auf Chrom/osx, iphone/mobile Safari, Firefox/osx http://jsfiddle.net/toniehock/QQGnj/6/show

Quelle

2012-07-13 18:04:35 toniehock

Wenn Sie outline:none; verwenden Sie bitte einen Fokus Stil. Siehe http://outlinenone.com/.

Diese Funktion ist sehr hilfreich, wenn eine Maus nicht verwendet wird. Gliederung bietet eine wichtige Eingabehilfefunktion. Fügen Sie daher, wenn Sie sie entfernen müssen, einen Stil für den Linkfokus und die aktiven Status hinzu. Bitte helfen Sie den Nutzern zu verstehen, wo es Links gibt.

Quelle

2012-10-05 14:50:09

Versuchen Sie es mit: -webkit-tap-highlight-color: rgba (0, 0, 0, 0);

Quelle

2013-02-28 15:10:05 user2120141

Dies ist die einzige Lösung, die funktioniert! – Alin

noup .............. –

Verwenden -webkit-appearance: none;

#yourElement:focus { 
    -webkit-appearance: none; 
} 

#yourElement:hover { 
    -webkit-appearance: none; 
}

Und es wird den Trick tun.

Quelle

2016-09-17 21:12:57 AlexanderGriffin

dies funktioniert mit :) .classNameYo {-webkit-aussehen: keine; Umriss: keine; } Verwenden Sie es mit Apache Cordova App. – yanike

Umriss: keine; funktioniert nicht - nur -webkit-aussehen: keine; funktioniert - was ist hier falsch?

Antwort

Verwandte Themen