So gestalten Sie ein Eingabeelement mit CSS

CSS ist eine Sprache zum Gestalten von Webseiten. Sie kann uns dabei helfen, verschiedene Effekte auf Webseiten zu erzielen. In der Webentwicklung sind Formulare sehr häufige Elemente und die Eingabe ist eines der grundlegendsten Steuerelemente im Formular. In diesem Artikel erfahren Sie, wie Sie Eingabeelemente mithilfe von CSS formatieren.

1. Eingabefeldstil

1. Breite und Höhe

Über CSS können wir die Breite und Höhe des Eingabefelds einfach festlegen. Mit den Attributen width und height können Sie die Größe des Eingabefelds wie folgt festlegen:

input[type="text"] {
width: 200px;
height: 30px;
}

2. border style

Rahmen ist eines der am häufigsten verwendeten Elemente in Eingabefeldstilen. Mit der Eigenschaft border kann der Rahmenstil des Eingabefelds festgelegt werden.

Zum Beispiel setzt der folgende Code den Rand des Eingabefelds auf eine durchgezogene Linie, eine Breite von 1 Pixel und eine graue Farbe:

input[type="text"] {
border: 1px solid #aaa;
}

Wir können den Rand auch auf unsichtbar setzen, sodass das Eingabefeld keinen Rand hat:

input[type="text"] {
border: none;
}

3. abgerundete Ecken und Schatten

via Mit CSS können wir auch die abgerundeten Ecken und den Schatten des Eingabefelds festlegen. Der folgende Code legt beispielsweise die abgerundeten Ecken des Eingabefelds auf 5 Pixel und den Schatteneffekt fest:

input[type="text"] {
border-radius: 5px;
box-shadow: 0 0 5px rgba( 0,0 ,0,0.5);
}

4. Textfeldstil

Wir können auch das Textfeld des Eingabeelements anpassen. Sie können beispielsweise die Hintergrundfarbe und Schriftgröße des Textfelds sowie die Farbe des eingegebenen Texts festlegen. Hier ist ein Beispiel:

input[type="text"] {
Schriftgröße: 16px;
Farbe: #333;
Hintergrundfarbe: #f2f2f2;
}

2. Optionsfelder und Kontrollkästchen Stil

Neben Texteingabefeldern sind auch Optionsfelder und Kontrollkästchen häufig verwendete Elemente in Formularen. Wir können sie durch CSS verschönern, um eine bessere Benutzererfahrung zu erzielen.

1. Änderung des Erscheinungsbilds

Das Erscheinungsbild von Optionsfeldern und Kontrollkästchen wird normalerweise durch den Standardstil des Browsers gerendert. Mithilfe von CSS können wir diese Steuerelemente jedoch an unsere Bedürfnisse anpassen.

Zuerst müssen wir die folgenden CSS-Regeln hinzufügen, um das Erscheinungsbild von Optionsfeldern und Kontrollkästchen zu ändern:

input[type="radio"], input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
aussehen: none;
border: 1px solid #ccc;
border-radius: 50%;
width: 16px;
height: 16px;
outline: none;
transition: all 0.3s easy-in-out;
}

Dieser Code verbirgt die standardmäßigen Optionsfeld- und Kontrollkästchenstile des Browsers und ändert sie in runde Formen.

2. Farbe und Animation

Wir können Optionsfelder und Kontrollkästchen auch weiter verschönern, indem wir ihre Farb- und Animationseffekte ändern.

Der folgende Code legt einige einfache Animationseffekte für Optionsfelder und Kontrollkästchen fest:

input[type="radio"]:checked, input[type="checkbox"]:checked {
background-color : #000;
Rahmenfarbe: #000;
Übergang: alle 0,3 Sekunden Ease-in-out;
}

Dieser Code fügt eine einfache Hintergrundfarbe und einen Rahmen hinzu, wenn das Optionsfeld und das Kontrollkästchen ausgewählt sind. Die Farbe ändert sich.

3. Button-Stil

Button ist eines der am häufigsten verwendeten Elemente in Formularen. Der Standard-Schaltflächenstil sieht oft sehr altmodisch aus, aber über CSS können wir die Farbe, Schriftart, Größe und andere Attribute der Schaltfläche problemlos ändern.

1. Schaltflächenfarbe

Wir können die Schaltflächen verschönern, indem wir ihre Hintergrundfarbe und Schriftfarbe ändern. Der folgende Code fügt einen Hintergrundfarbverlaufseffekt hinzu, wenn der Mauszeiger über die Schaltfläche bewegt wird:

button {
background: linear-gradient(#3180b8, #1e68a2);
border: none;
border-radius: 3px;
color: # fff;
Cursor: Zeiger;
Schriftgröße: 16px;
Polsterung: 8px 16px;
Übergang: alle 0,3 Sekunden easy;
}

button:hover {
Hintergrund: linear-gradient(#1e68a2, #3180b8) ;
}

2. Schaltflächengröße und Schriftart

Wir können auch die Größe und Schriftart der Schaltfläche ändern, um sie moderner aussehen zu lassen. Der folgende Code vergrößert die Textgröße der Schaltfläche und macht sie fett:

button {
Schriftgröße: 18px;
Schriftstärke: fett;
Polsterung: 10px 24px;
}

Fazit

In der Webentwicklung , Formularelemente sind sehr verbreitet. Der Stil dieser Elemente kann mithilfe von CSS einfach geändert werden, um sie moderner und schöner aussehen zu lassen. In diesem Artikel wird erläutert, wie Sie CSS zum Formatieren von Eingabeelementen verwenden. Wenn wir ein Formular schreiben, können wir das Erscheinungsbild der Formularelemente mithilfe der in diesem Artikel beschriebenen Methoden an unsere Bedürfnisse und Vorlieben anpassen.

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