Heim > Web-Frontend > CSS-Tutorial > So deaktivieren Sie die Textauswahl in CSS

So deaktivieren Sie die Textauswahl in CSS

王林
Freigeben: 2023-01-06 11:14:40
Original
6979 Leute haben es durchsucht

Die Möglichkeit, die Textauswahl in CSS zu verhindern, besteht darin, das Attribut user-select hinzuzufügen und den Attributwert auf none zu setzen, was bedeutet, dass der Text nicht ausgewählt werden kann. Der spezifische Code ist wie [user-select:none;].

So deaktivieren Sie die Textauswahl in CSS

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Wenn wir in einem Webbrowser auf Text doppelklicken, wird der Text ausgewählt oder hervorgehoben. Was also, wenn wir dieses Verhalten verbieten wollen? Es ist eigentlich ganz einfach, verwenden Sie einfach die folgenden Eigenschaften.

Das User-Select-Attribut gibt an, ob der Text des Elements ausgewählt werden kann.

Wenn Sie in einem Webbrowser auf Text doppelklicken, wird der Text ausgewählt oder hervorgehoben. Diese Eigenschaft wird verwendet, um dieses Verhalten zu verhindern.

Syntax:

user-select: auto|none|text|all;
Nach dem Login kopieren

Attributwert:

  • auto Standard. Text kann ausgewählt werden, wenn der Browser dies zulässt.

  • keine Textauswahl verhindern.

  • Text Text kann vom Benutzer ausgewählt werden.

  • alle Klicken Sie, um Text auszuwählen, anstatt zu doppelklicken.

Der Implementierungscode lautet wie folgt:

PC-Seite:

.not-select{
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}
Nach dem Login kopieren

Mobile Seite:

.no-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Nach dem Login kopieren

Zugehörige Videofreigabe: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie die Textauswahl in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage