Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So erreichen Sie, dass in CSS kein Cursor im Textfeld angezeigt wird

WBOY
Freigeben: 2021-11-24 10:47:53
Original
2112 Leute haben es durchsucht

Methode: 1. Fügen Sie dem Textfeldelement den Stil „color:transparent;“ hinzu, um den Text und den Cursor im Textfeld transparent zu machen; zum Textfeldelement. Gestalten Sie es einfach so, dass der Text angezeigt wird.

So erreichen Sie, dass in CSS kein Cursor im Textfeld angezeigt wird

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

So erstellen Sie ein Textfeld ohne Cursor in CSS

Um ein Textfeld ohne Cursor zu erstellen, müssen wir zunächst den Text im Textfeld auf transparent setzen Der Cursor folgt dem Text. Wenn der Text transparent ist, ist auch der Cursor im Textfeld transparent und unsichtbar.

Unser Ziel kann derzeit nicht erreicht werden, da wir den Text nicht sehen können. Zu diesem Zeitpunkt müssen wir nur das Textschattenattribut für den Text im Textfeld festlegen, um ihn anzuzeigen.

Die Syntax dieses Attributs lautet:

text-shadow: h-shadow v-shadow blur color;
Nach dem Login kopieren

So erreichen Sie, dass in CSS kein Cursor im Textfeld angezeigt wird

Sehen wir uns die Anwendung dieser Methode anhand eines Beispiels an:

<!DOCTYPE html>
<html>
<style>
  input{
    color: transparent;
    text-shadow: 0 0 0 #000;
  }
</style>
<body>
name:
<input type="text">
</body>
</html>
Nach dem Login kopieren

Wenn dem Textfeld kein Stil hinzugefügt wird, ist der Cursor wie folgt folgt:

So erreichen Sie, dass in CSS kein Cursor im Textfeld angezeigt wird

Wenn nach dem Hinzufügen eines Stils zum Textfeld das Ausgabeergebnis wie folgt lautet:

So erreichen Sie, dass in CSS kein Cursor im Textfeld angezeigt wird

Wie oben gibt es keinen Cursor im Textfeld.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo erreichen Sie, dass in CSS kein Cursor im Textfeld angezeigt wird. 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