Wie kann ich eine Texteingabe mithilfe von CSS so gestalten, dass sie wie ein Passwortfeld aussieht?

Eingabetext mit CSS so gestalten, dass er einem Passwortfeld ähnelt

Herausforderung:

Viele Webformulare enthalten Eingabefelder mit dem „ „type=text“-Attribut. Während dieses Attribut Benutzern die Eingabe von sichtbarem Text ermöglicht, kann es wünschenswert sein, vertrauliche Informationen durch die Anzeige von Sternchen zu verbergen, wie in einem Eingabefeld mit dem Attribut „type=password“.

Lösung mit CSS:

CSS bietet eine Lösung für diese Herausforderung. Die Eigenschaften -webkit-text-security und text-security bieten eine Möglichkeit, Texteingaben in Browsern zu verbergen:

Code:

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

Implementierung:

Wenden Sie die Klasse „pw“ auf das Eingabefeld an:

<code class="html"><input type="text" class="pw" value="abcd"></code>

Zusätzliche Funktionen:

Für Browser, die dies nicht unterstützen Wenn Sie diese Eigenschaften nicht verwenden, sollten Sie erwägen, eine Fallback-Option bereitzustellen oder eine JavaScript-basierte Lösung zu verwenden.

Browserkompatibilität:

Die Eigenschaft -webkit-text-security wird in WebKit- unterstützt. basierte Browser, während die Textsicherheitseigenschaft in modernen Browsern unterstützt wird. Für die IE8-Kompatibilität wird ein CSS-Fallback oder eine JavaScript-Lösung empfohlen.

Das obige ist der detaillierte Inhalt vonWie kann ich eine Texteingabe mithilfe von CSS so gestalten, dass sie wie ein Passwortfeld aussieht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!