Detaillierte Erläuterung der Verwendung gemischter Attribute einiger versteckter erweiterter Attribute in CSS3

-webkit-user-select und -moz-user-select

Vielleicht möchten Sie oft nicht, dass Benutzer Text auf Ihrer Website auswählen, sei es aus urheberrechtlichen Gründen oder nicht. Normalerweise hat jeder js, um es zu implementieren. Eine andere Lösung besteht darin, die Werte von -webkit-user-select und -moz-user-select auf „none“ zu setzen.

Bitte verwenden Sie dieses Attribut mit Vorsicht: Da die meisten Benutzer hier sind, um Informationen anzuzeigen, die sie kopieren und für die zukünftige Verwendung speichern können, ist dieser Ansatz weder nützlich noch effektiv. Wenn Sie das Kopieren und Einfügen deaktivieren, können Benutzer weiterhin das erhalten, was sie möchten, indem sie die Quelldatei anzeigen. Ich verstehe nicht, warum dieses Attribut von Webkit und Gecko unterstützt wird.

Browserunterstützung: WebKit, Gecko.

-webkit-appearance und -moz-appearance

Wollten Sie schon immer ein Bild als Optionsfeld tarnen? Oder ein Eingabefeld, das wie ein Kontrollkästchen aussieht? Nun erscheint also das Aussehen. Auch wenn Sie nicht möchten, dass ein Link immer wie eine Schaltfläche aussieht, finden Sie hier ein Beispiel, das Ihnen zeigt, wie Sie dies tun können, wenn Sie möchten:

Beispiel

   a {
-webkit-appearance: button;
-moz-appearance: button;
}

Browser-Unterstützung: WebKit, Gecko.

text-align: -moz-center/-webkit-center

Dies ist ein Attribut (oder genauer gesagt ein „Attributwert“). Die Existenz von ist sehr überraschend. Um ein Element auf Blockebene zu zentrieren, setzen wir es normalerweise auf margin:0 auto. Allerdings können Sie jetzt auch die text-align-Eigenschaft des Elementcontainers auf -moz-center und -webkit-center setzen. Entsprechend können Sie das Element auch nach links oder rechts setzen, indem Sie -moz-left, -webkit-left oder -moz-right, -webkit-right setzen.

Browserunterstützung: WebKit, Gecko.

-webkit-tap-highlight-color

Dieses Attribut wird nur auf iOS (iPhone und iPad) verwendet. Wenn Sie auf einen durch Javascript definierten Link oder ein anklickbares Element klicken, wird dieser mit einem halbtransparenten 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:

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

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

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 angezeigt wird, wenn auf das a-Tag geklickt wird im IE-Browser. IE7 und niedrigere Browser erkennen dieses Attribut noch nicht. Sie müssen die Eingabe hidefocus="true"(2) zum Tag textarea{outline:none} hinzufügen, um den Standardtextfeld-Fokusstil unter Chrome (3) aufzuheben Auf dem mobilen Endgerät nicht verfügbar. Wenn Sie den Standardstil des Textfelds entfernen möchten, können Sie den Standardstil beim Fokussieren aufheben. Ich habe einige mobile Reset-Dateien gesehen, die dieses Attribut hinzugefügt haben, aber es ist eigentlich überflüssig.

webkit-appearance -webkit-appearance: none; //Entfernen Sie das native Erscheinungsbild des Eingabefelds und der Schaltfläche. Nur durch Hinzufügen dieses Attributs unter iOS können Sie den Stil der Schaltfläche und des Eingabefelds anpassen. Hinweis: Verschiedene Eingabetypen verhalten sich nach Verwendung dieses Attributs unterschiedlich. Text und Schaltflächen haben keinen Stil und Radio und Kontrollkästchen verschwinden direkt.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung gemischter Attribute einiger versteckter erweiterter Attribute in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!