Heim > Web-Frontend > CSS-Tutorial > So verbergen Sie den Eingabecursor mithilfe von CSS

So verbergen Sie den Eingabecursor mithilfe von CSS

小云云
Freigeben: 2017-12-22 15:05:33
Original
4588 Leute haben es durchsucht

Wie kann ich den Eingabecursor ausblenden, ohne den Betrieb zu beeinträchtigen? Ich habe im Internet nach vielen Methoden gesucht: P-Simulation verwenden, schreibgeschützt festlegen, deaktiviert festlegen, automatische Unschärfe festlegen usw., aber festgestellt, dass keine davon den Anforderungen gerecht wird, sodass ich schließlich eine perfekte Methode gefunden habe. Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von CSS zum Ausblenden des Eingabecursors ein. Obwohl dies unangemessen erscheint, gibt es bei Bedarf eine Einführung darin ist sehr detailliert. Freunde, die es brauchen, können es mit dem untenstehenden Herausgeber lesen.

Die Methode ist wie folgt:

Zuerst den Cursor ausblenden


  <style>
    input{
      color: transparent;
    }
  </style>
Nach dem Login kopieren

Weil Der Cursor folgt dem Text Ja, also haben wir die Farbe des Texts auf transparent gesetzt und der Cursor ist verschwunden~

Aber hier kommt das Problem: Was nützt das Eingabefeld, wenn der Text transparent ist? Keine Sorge, bitte schauen Sie nach unten~

Zeigen Sie den Text an


  <style>
    input{
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>
Nach dem Login kopieren

Setzen Sie den Textschatten auf die Eingabe, der Text ist transparent, aber wir kann Textschatten anstelle von Textfarbe verwenden, was eine perfekte Lösung ist.

text-shadow-Eigenschaft

Syntax:


text-shadow:x-offset y-offset blur color;
Nach dem Login kopieren

Erklärung:

x-Offset: (horizontaler Schatten) stellt den horizontalen Versatzabstand des Schattens dar, die Einheit kann px sein, em oder Prozentsatz usw. Wenn der Wert positiv ist, wird der Schatten nach rechts versetzt; wenn der Wert negativ ist, wird der Schatten nach links versetzt.

y-Offset: (vertikaler Schatten) stellt den vertikalen Versatzabstand des Schattens dar , die Einheit kann px , em oder Prozentsatz usw. sein. Wenn der Wert positiv ist, wird der Schatten nach unten verschoben; wenn der Wert negativ ist, wird der Schatten nach oben verschoben.

Unschärfe: (Unschärfeabstand) gibt den Grad der Unschärfe des Schattens an, die Einheit kann px sein , em oder Prozentsatz usw. . Der Unschärfewert darf nicht negativ sein. Wenn der Wert größer ist, ist der Schatten unschärfer; wenn der Wert kleiner ist, ist der Schatten klarer. Wenn Sie den Schattenunschärfeeffekt nicht benötigen, können Sie den Unschärfewert natürlich auf 0 setzen.

Farbe: (die Farbe des Schattens) gibt die Farbe des Schattens an

Verwandte Empfehlungen:

Zwei JS-Methoden zum Implementieren des Hinzufügens kleiner Symbole in der Eingabe

Das Problem, dass die Einstellung im Eingabeattribut Radio überprüft wird, löst nicht Wirkung

Detaillierte Erläuterung der Fuzzy-Prompt-Funktion des Javascript-Eingabefelds

Das obige ist der detaillierte Inhalt vonSo verbergen Sie den Eingabecursor mithilfe von 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