Eingabecursor mit CSS ausblenden

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von CSS zum Ausblenden des Eingabecursors und zum Ausblenden des Eingabecursors mit CSS vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

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, wir haben kein Recht zu widerlegen und können es nur stillschweigend akzeptieren ...

Suche online viele Möglichkeiten: p-Simulation verwenden, schreibgeschützt festlegen, festlegen deaktiviert, automatische Unschärfe und andere Methoden eingestellt, aber festgestellt, dass keine davon den Anforderungen gerecht wird. Schließlich habe ich eine perfekte Lösung gefunden, 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, legen wir die Farbe des fest Text transparent machen. 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>

Textschatten für die Eingabe festlegen Der Text ist transparent, aber wir können Textschatten verwenden, um den Text zu ersetzen. Farbe, das ist die perfekte Lösung.

text-shadowAttribut

Syntax:

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

Erklärung:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Animationssequenzanimation für CSS3

CSS Weird Box Model and Standards So verwenden Sie das Box-Modell

Das obige ist der detaillierte Inhalt vonEingabecursor mit CSS ausblenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!