Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So deaktivieren Sie Klicks in CSS

藏色散人
Freigeben: 2023-01-04 09:34:09
Original
22096 Leute haben es durchsucht

So deaktivieren Sie Klicks in CSS: 1. Fügen Sie dem Eingabefeld einen deaktivierten Status hinzu, indem Sie „deaktiviert“ festlegen. 2. Fügen Sie einen deaktivierten Status zum deaktivierten Status hinzu, indem Sie „cursor:not-allowed“ festlegen -events:none" Das ist es.

So deaktivieren Sie Klicks in CSS

Die Betriebsumgebung dieses Artikels: Windows 7-System, HTML5- und CSS3-Version, DELL G3-Computer

CSS implementiert deaktivierten Status, Stileinstellungen und nicht anklickbares Ereignisverhalten

Heute werde ich mit Ihnen einen Artikel darüber teilen Deaktivieren von Status- und Stileinstellungen über CSS Neben einer Beispielerklärung für nicht anklickbare Stilereignisse hat es einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird. Kommen Sie und schauen Sie es sich gemeinsam mit mir an

Erstens: Fügen Sie dem Eingabefeld einen deaktivierten Status hinzu

1, readonly bedeutet, dass der Wert dieses Felds nicht geändert werden kann und nur mit type= verwendet werden kann „Text“. Kopieren, auswählbar, kann Fokus erhalten, kann übergebene Werte im Hintergrund empfangen.
Codedemonstration:

<input type="text" name="firstname" value=""  readonly="readonly" />
Nach dem Login kopieren

2, disabled bedeutet, dass das Eingabeelement deaktiviert ist und nicht bearbeitet werden kann , kann nicht kopiert werden, kann nicht ausgewählt werden, kann nicht empfangen werden Fokus, Der Hintergrund kann den übergebenen Wert nicht empfangen
Codedemonstration:

 <input type="text" name="firstname" value="" disabled="disabled" />
Nach dem Login kopieren

Zwei: Fügen Sie einen Status für den deaktivierten Status hinzu

Es gibt zwei Haupt Erscheinungsformen dafür, dass die Maus nicht anklickbar ist:

1. Wenn die Maus nicht anklickbar ist. Anzeigestatus: Cursor: nicht zulässig. Stildemonstration:

<style> 
    input[readonly]   //readonly:后台能接收此input框传值
    {
         background:#dddddd; //为带有readonly的input框添加背景颜色
         cursor: not-allowed  // 表示一个红色的圈加一个斜杠
    }
</style>
Nach dem Login kopieren
. 2. Die ursprünglichen Mausereignisse können nicht implementiert werden: Zeigerereignisse: keine Stildemonstration:

<style> 
    input[disabled] //disadled:后台不可接收此input传值
    {
         background:#dddddd; //为带有disabled的input框添加背景颜色
         pointer-events:none;//鼠标点击不可修改
    }
</style>
Nach dem Login kopieren

--------- ----------------------erweitern----------- ---------------- ------

cursor Definition und Verwendung Das

cursor-Attribut gibt den Typ (die Form) des anzuzeigenden Cursors an . [Empfohlenes Lernen: „CSS-Video-Tutorial“]

Dieses Attribut definiert die Cursorform, die verwendet wird, wenn der Mauszeiger innerhalb der Grenze eines Elements platziert wird (CSS2.1 definiert jedoch nicht, welche Grenze diesen Bereich bestimmt).

Standard:

autoVererbung: JaVersion: CSS2JavaScript-Syntax: object.style.cursor="Fadenkreuz"
Mögliche Werte

Wert

Beschreibung Standardcursor (normalerweise ein Pfeil) AutoStandard. Der vom Browser gesetzte Cursor. FadenkreuzDer Cursor wird als Fadenkreuz dargestellt. ZeigerDer Cursor wird als Zeiger (eine Hand) dargestellt, der einen Link anzeigt. moveDieser Cursor zeigt an, dass ein Objekt verschoben werden kann. e-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach rechts (Osten) verschoben werden kann. ne-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach rechts (Norden/Osten) verschoben werden kann. nw-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben und nach links (Norden/Westen) verschoben werden kann. n-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach oben (Norden) verschoben werden kann. se-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und nach rechts (Süden/Osten) verschoben werden kann. sw-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten und links (Süden/Westen) verschoben werden kann. s-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach unten (Süden) verschoben werden kann. w-resizeDieser Cursor zeigt an, dass der Rand des rechteckigen Felds nach links (Westen) verschoben werden kann. TextDieser Cursor zeigt Text an. WartenDieser Cursor zeigt an, dass das Programm beschäftigt ist (normalerweise eine Uhr oder eine Sanduhr). HilfeDieser Cursor zeigt verfügbare Hilfe an (normalerweise ein Fragezeichen oder eine Sprechblase).
URL
Die URL des zu verwendenden benutzerdefinierten Cursors. Hinweis: Definieren Sie immer einen normalen Cursor am Ende dieser Liste, falls kein verfügbarer Cursor durch die URL definiert ist.

Standard

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

Verwandte Etiketten:
css
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