Farbänderung der CSS-Eingabe

Das Eingabeelement in CSS ist eines der am häufigsten verwendeten Elemente in Websites. Wir sehen oft verschiedene Eingabefelder in Formularen, wie z. B. Textfelder, Optionsfelder, Mehrfachauswahlfelder usw. Allerdings entsprechen die Standardfarben dieser Elemente nicht unbedingt den Stilanforderungen unserer Website. Wie kann man also die Farbe des Eingabeelements ändern? In diesem Artikel werden verschiedene Methoden zum Ändern der Farbe von Eingabeelementen vorgestellt.

1. Ändern Sie die Farbe des Eingabeelements über CSS

In CSS können wir das Attribut „Hintergrundfarbe“ verwenden, um die Hintergrundfarbe des Eingabeelements festzulegen, wie unten gezeigt:

input{

background-color: #cccccc;

}

Nachdem Sie es so eingestellt haben, wird die Farbe des Eingabeelements grau. Wir können auch andere Eigenschaften wie Textfarbe, Rahmenfarbe usw. festlegen. Zum Beispiel:

input{

background-color: #ffffff;
color: #333;
border: 1px solid #333;

}

Der obige Code bedeutet, die Hintergrundfarbe des Eingabeelements auf Weiß, die Textfarbe auf Dunkelgrau und die Rahmenfarbe auf Schwarz festzulegen.

2. Ändern Sie die Fokusfarbe des Eingabeelements über CSS.

Wenn der Benutzer auf das Eingabeelement klickt, möchten wir möglicherweise auch seine Farbe ändern. Zu diesem Zeitpunkt müssen Sie die Pseudoklasse :focus verwenden. Zum Beispiel:

input:focus{

background-color: #f8e5a1;
color: #333;
border: 1px solid #333;

}

Wenn der Benutzer nach dem Festlegen auf das Eingabeelement klickt, ändert sich dessen Hintergrundfarbe in Gelb und die Textfarbe und die Rahmenfarbe ändern sich nicht.

3. Ändern Sie die Hover-Farbe des Eingabeelements über CSS

Wir können auch die Pseudoklasse :hover verwenden, um die Farbe zu ändern, wenn die Maus über das Eingabeelement fährt. Zum Beispiel:

input:hover{

background-color: #f5f5f5;

}

Nachdem Sie dies festgelegt haben und die Maus über das Eingabeelement schwebt, wird dessen Hintergrundfarbe hellgrau.

4. Ändern Sie die Farben verschiedener Arten von Eingabeelementen über CSS.

Zu den verschiedenen Arten von Eingabeelementen gehören Textfelder, Optionsfelder, Mehrfachauswahlfelder, Schaltflächen usw. Wir können verschiedene CSS-Selektoren verwenden, um verschiedene Arten von Eingabeelementen auszuwählen und dann deren Farben zu ändern. Zum Beispiel:

input[type="text"]{

background-color: #ffffff;
color: #333;
border: 1px solid #ccc;

}

Der obige Code bedeutet, das Eingabeelement des Textfeldtyps auszuwählen und seine Hintergrundfarbe auf Weiß, die Textfarbe auf Dunkelgrau und die Rahmenfarbe festzulegen bis Hellgrau.

input[type="checkbox"]{

/*设置复选框的颜色*/

}

input[type="radio"]{

/*设置单选框的颜色*/

}

input[type="submit"]{

/*设置提交按钮的颜色*/

}

5 JavaScript ändert die Farbe von Eingabeelementen

Zusätzlich zu CSS können wir auch JavaScript verwenden, um die Farbe von Eingabeelementen dynamisch zu ändern. Wenn Sie beispielsweise auf eine Schaltfläche klicken, ändern Sie die Hintergrundfarbe des Textfelds in Rot. Sie können den folgenden Code verwenden, um dies zu erreichen:

//Schaltflächenelement abrufen
var btn = document.getElementById("btn");
//Textfeldelement abrufen
var text = document.getElementById("text" );
//Give Button binding click event
btn.onclick = function(){

text.style.backgroundColor = "#ff0000";

}

Das dynamische Ändern der Farbe des Eingabeelements über JavaScript ist sehr flexibel, es sollte jedoch beachtet werden, dass es die Seitenleistung beeinträchtigen kann . Daher müssen Sie bei der Verwendung von JavaScript zum Ändern der Farbe von Eingabeelementen sorgfältig überlegen.

Zusammenfassung

Mit den oben genannten Methoden können wir die Farbe des Eingabeelements einfach ändern. Sie können die Standardfarbe, Fokusfarbe, Hover-Farbe usw. in CSS festlegen oder verschiedene CSS-Selektoren verwenden, um verschiedene Arten von Eingabeelementen auszuwählen. Sie können auch JavaScript verwenden, um eine flexiblere Farbänderung zu erreichen. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonFarbänderung der CSS-Eingabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!