So verwenden Sie CSS zum Ausblenden des Eingabecursors. Beispielcode_CSS-Tutorial_CSS_Webseitenproduktion

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum Ausblenden des Eingabecursors ein. Dies ist eine Anforderung, auf die ich kürzlich bei der Arbeit gestoßen bin. Im Artikel finden Sie jedoch eine Lösung Der CSS-Beispielcode wird ausführlich vorgestellt. Freunde, die sich für CSS interessieren, und diejenigen, die ihn benötigen, können ihn gemeinsam mit dem Herausgeber lernen.

Vorwort

Vor kurzem kam mir plötzlich die Benutzeroberfläche des Unternehmens in den Sinn und stellte mir eine Frage: „Wie kann ich die Eingabe ändern, ohne den Betrieb zu beeinträchtigen?“ „Der Cursor ist ausgeblendet?“

Ich glaube, viele Leute werden wie ich denken, dass dies eine beschissene Anforderung ist, wenn der Cursor nicht im Eingabefeld steht. Schade, dass wir nur kleine Programmierer sind und das nur stillschweigend hinnehmen können...

Suche im Internet in vielerlei Hinsicht : Verwenden Sie p zum Simulieren, Festlegen des Schreibschutzes, Festlegen der Deaktivierung, Festlegen der automatischen Unschärfe usw., stellte jedoch fest, dass keines davon die Anforderungen erfüllen konnte. Schließlich fand ich eine perfekte Lösung, die von einem Meister bereitgestellt wurde.

Die Methode ist wie folgt:

Zuerst den Cursor ausblenden

  <style>
    input{
      color: transparent;
    }
  </style>

Da der Cursor dem Text folgt, setzen wir die Farbe des Textes auf transparent und der Cursor verschwindet~

Aber hier kommt das Problem: Wozu dient das Eingabefeld, wenn der Text angezeigt wird? ist transparent? Keine Sorge, bitte schauen Sie nach unten~

Text anzeigen

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

Auf den Eingabetext einstellen -shadow, der Text ist transparent, aber wir können Textschatten verwenden, um die Farbe des Textes zu ersetzen, was eine perfekte Lösung ist.

text-shadowAttribut

Syntax:

text-shadow:x-offset y-offset blur color;

Beschreibung:

x-Offset: (horizontaler Schatten) Stellt den horizontalen Versatzabstand des Schattens dar. Die Einheit kann px, em oder Prozentsatz usw. sein. 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) stellt die Farbe des Schattens dar

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er kann für alle hilfreich sein! !

Verwandte Empfehlungen:

Umfassende Methoden zum Anpassen von Textauslassungen mithilfe von reinem CSS

CSS zur Erzielung einer horizontalen Anordnung und eines Bildlaufeffekts von Bildern

CSS und JS zur Implementierung eines Tutorials zur Popup-Login-Zentrierungsschnittstelle

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS zum Ausblenden des Eingabecursors. Beispielcode_CSS-Tutorial_CSS_Webseitenproduktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!