CSS-Textfeld schreibgeschützt

Beim Website-Design verwenden wir häufig Textfelder, um von Benutzern eingegebene Informationen zu speichern. In einigen Fällen hoffen wir, dass dieses Textfeld nur zur Anzeige von Informationen verwendet werden kann und nicht geändert werden kann. Zu diesem Zeitpunkt müssen Sie die schreibgeschützte Eigenschaft von CSS verwenden.

In HTML verwenden wir normalerweise Eingabe-Tags, um Textfelder zu erstellen. Unter anderem kann das Typattribut den Typ des Eingabefelds festlegen, z. B. Textfeld, Passwortfeld, E-Mail usw. Um ein Textfeld schreibgeschützt zu machen, müssen wir die Eigenschaft readonly auf true setzen. Hier ist ein Beispiel:

Im obigen Code ist der Wert des Textfelds „johndoe“ und das Attribut „readonly“ ist festgelegt auf true, d. h. auf den schreibgeschützten Status.

Sehen wir uns nun an, wie man ein Textfeld über CSS schreibgeschützt macht. Zuerst müssen wir das Eingabeelement im HTML finden und dann mit der Attributauswahl das schreibgeschützte Textfeld auswählen. Attributselektoren können Elemente basierend auf ihren Attributwerten auswählen. Die Syntax lautet Attribut=Wert. Um beispielsweise ein schreibgeschütztes Textfeld auszuwählen, können wir den folgenden Code verwenden:

input[readonly] {

background-color: #eee;

}

Der obige Code setzt die Hintergrundfarbe aller Eingabeelemente mit dem Attribut „readonly“ auf Grau . Wenn Sie nur einen bestimmten Textfeldtyp auswählen möchten, können Sie so schreiben:

inputtype="text" {

background-color: #eee;

}

Dadurch werden alle Eingabeelemente ausgewählt, deren Typattribut „Text“ und deren schreibgeschütztes Attribut ist wahr, und setzen Sie ihre Hintergrundfarbe auf Grau. Wenn Sie die Auswahl weiter einschränken möchten, können Sie andere Selektoren verwenden, beispielsweise Klassen- oder ID-Selektoren.

Neben der Änderung der Hintergrundfarbe können Sie auch andere CSS-Stile verwenden, um schreibgeschützte Textfelder anzuzeigen. Sie können beispielsweise die Farbe, die Ränder, die Schriftart usw. des Textfelds ändern. Hier sind einige gängige schreibgeschützte Textfeldstile:

/ Textfeld nicht bearbeitbar machen /
input[readonly] {

-webkit-user-select: none; /* Safari/Chrome */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;

}

/ Rand aus dem Textfeld entfernen /
input[readonly] {

border: none;

}

/ Hintergrundfarbe, Schriftfarbe und Schriftgröße des Textfelds ändern/
input[readonly] {

background-color: #f0f0f0;
color: #333;
font-size: 14px;

}

Kurz gesagt, mit der schreibgeschützten Eigenschaft von CSS können Sie Sie können das Textfeld problemlos auf den Status „Schreibgeschützt“ setzen, um sicherzustellen, dass die vom Benutzer eingegebenen Informationen nicht geändert werden. Durch Anpassen des CSS-Stils können wir auch den Anzeigeeffekt des Textfelds ändern, um es besser an den Designstil der Website anzupassen.

Das obige ist der detaillierte Inhalt vonCSS-Textfeld schreibgeschützt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!