So verwenden Sie die Eigenschaft webkit-tap-highlight-color von CSS3

Dieses Mal zeige ich Ihnen, wie Sie die Webkit-Tap-Highlight-Color-Eigenschaft von CSS3 verwenden. Einer steht auf und schaut nach.

-webkit-tap-highlight-color

Diese Eigenschaft ist nur auf iOS (iPhone und iPad) verfügbar. Wenn Sie auf einen Link oder ein anklickbares Element klicken, das über

Javascript

definiert wurde, wird es mit einem durchscheinenden grauen Hintergrund angezeigt. Um dieses Verhalten zurückzusetzen, können Sie -webkit-tap-highlight-color auf eine beliebige Farbe setzen. Um diese Hervorhebung zu deaktivieren, setzen Sie den Alpha-Wert der Farbe auf 0.
Beispiel: Stellen Sie die Hervorhebungsfarbe auf 50 % transparentes Rot ein:

Browserunterstützung: iOS (nur iPhone und iPad).

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

css3 Detaillierte Erklärung von -webkit-text-size-adjust

1. Wenn

font-size

<12px im Stylesheet, ist die Schriftartanzeige in der chinesischen Version des Chrome-Browsers unverändert 12px. Zu diesem Zeitpunkt können Sie html{-webkit-text-size-adjust:none;}2 verwenden. Wenn Sie -webkit-text-size-adjust im Hauptteil platzieren, schlägt der Seitenzoom fehl

3 . Der Text erbt den in HTML definierten Stil

4. Verwenden Sie -webkit-text-size-adjust und definieren Sie ihn nicht als vererbbar oder global

Umriss: keine(1) Der Zweck der Definition dieses Stils für das a-Tag auf dem PC besteht darin, die gepunktete Linie zu löschen, die beim Klicken auf das a-Tag darunter erscheint der

dh Browser

. IE7- und niedrigere Browser erkennen dieses Attribut noch nicht. Sie müssen hidefocus="true"(2)input, textarea{outline:none} zum a-Tag hinzufügen, um den Standardtextfeld-Fokusstil darunter aufzuheben chrome

(3) funktioniert nicht auf dem mobilen Endgerät. Wenn Sie den Standardstil des Textfelds entfernen möchten, können Sie -webkit-

appearance

verwenden Verwenden Sie zum Fokussieren -webkit-tap-highlight -color. Ich habe einige Dateien zum Zurücksetzen von Mobilgeräten gesehen, die dieses Attribut hinzugefügt haben, aber es ist eigentlich überflüssig.

webkit-appearance

-webkit-appearance: none;   //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。

Hinweis: Verschiedene Eingabetypen verhalten sich nach Verwendung dieses Attributs unterschiedlich. Text und Schaltfläche haben keinen Stil, Radio und Kontrollkästchen verschwinden direkt

-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

-webkit-touch-callout

-webkit-touch-callout:none;  // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vier Versteckmethoden in HTML+CSS

Häufige Missverständnisse bei der Verwendung von CSS und HTML

Detaillierte Erläuterung der Verwendung von border-image im CSS-Stil

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Eigenschaft webkit-tap-highlight-color von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!