In der Webentwicklung ist das Textfeld ein gängiges Benutzereingabesteuerelement. Durch CSS-Stile können wir das Textfeld variieren, einschließlich Farbe, Größe, Schriftart, Rahmen usw. In diesem Artikel stellen wir Ihnen ausführlich vor, wie Sie mithilfe von CSS Textfelder festlegen, um schönere und praktischere Webseiten zu erstellen.
Um die Größe des Textfelds festzulegen, können wir die Eigenschaften width und height in CSS verwenden. Mit dem folgenden Code wird beispielsweise die Breite des Textfelds auf 200 Pixel und die Höhe auf 30 Pixel festgelegt:
input[type="text"] {
width: 200px;
height: 30px;
}Darüber hinaus können wir auch die Eigenschaften max-width und max-height von CSS verwenden, um die maximale Größe festzulegen des Textfelds, um sicherzustellen, dass das Textfeld passt. Passen Sie verschiedene Bildschirmgrößen an:
input[type="text"] {
max-width: 100%;
height:30px;
}Die Farbe des Textfelds ist einer der wichtigen Faktoren für unsere Verschönerung. Wir können die Eigenschaft „background-color“ von CSS verwenden, um die Hintergrundfarbe des Textfelds festzulegen, und die Eigenschaft „color“, um die Farbe des Textes im Textfeld festzulegen. Der folgende Code setzt beispielsweise die Hintergrundfarbe für das Textfeld auf Grau und die Textfarbe auf Schwarz:
input[type="text"] {
background-color: #ccc;
color: #000;
}Wie die Farbe des Textfelds ist auch die Schriftart eine davon die wichtigen Faktoren für die Verschönerung des Textfelds. Wir können die Eigenschaft „font-family“ von CSS verwenden, um die Schriftart des Textes im Textfeld festzulegen, und die Eigenschaft „font-size“, um die Schriftgröße festzulegen. Mit dem folgenden Code wird beispielsweise die Schriftart für das Textfeld auf Microsoft Yahei und die Schriftgröße auf 14pt festgelegt:
input[type="text"] {
font-family: "Microsoft YaHei",Arial,sans-serif;
font-size: 14pt;
}Die Einstellung des Textfeldrands ist ebenfalls einer der wichtigen Faktoren bei der Verschönerung des Textfelds. Mit der CSS-Eigenschaft „border“ können wir den Stil, die Breite und die Farbe des Textfeldrahmens festlegen. Der folgende Code legt beispielsweise den Rand des Textfelds auf eine durchgezogene Linie, eine Breite von 1 Pixel und die Farbe Grau fest:
input[type="text"] {
border: 1px solid #ccc;
}Darüber hinaus können wir auch die Eigenschaft border-radius von CSS verwenden, um den festzulegen Abgerundeter Rand des Textfelds, um den Text zu vergrößern. Die Ästhetik des Rahmens.
input[type="text"] {
border: 1px solid #ccc;
border-radius: 5px;
}Wenn das Textfeld den Fokus erhält, können wir einen anderen Stil dafür festlegen, um es von anderen Textfeldern zu unterscheiden. Wir können die CSS-Pseudoklasse :focus verwenden, um das Textfeld zu formatieren, wenn es den Fokus erhält. Der folgende Code setzt beispielsweise die Hintergrundfarbe des Textfelds auf Gelb, wenn es den Fokus erhält:
input[type="text"]:focus {
background-color: yellow;
}In einigen Fällen müssen wir das Textfeld auf a setzen deaktiviert, um den Benutzer an der Eingabe zu hindern. Wir können die CSS-Pseudoklasse :disabled verwenden, um den deaktivierten Stil des Textfelds festzulegen. Der folgende Code setzt beispielsweise die Hintergrundfarbe auf Grau und die Textfarbe auf Hellgrau für ein deaktiviertes Textfeld:
input[type="text"]:disabled {
background-color: #eee;
color: #ccc;
}Schließlich können wir die oben genannten Stile kombinieren, um einen vollständigen Stil festzulegen das Textfeld. Mit dem folgenden Code wird beispielsweise ein Textfeld vollständig eingerichtet:
input[type="text"] {
width: 200px;
height: 30px;
padding: 5px 10px;
font-family: "Microsoft YaHei", Arial, sans-serif;
font-size: 14pt;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"]:focus {
background-color: #fff;
outline: none;
border-color: #66afe9;
box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.6);
}
input[type="text"]:disabled {
background-color: #eee;
color: #ccc;
}In diesem Artikel erklären wir ausführlich, wie Sie ein Textfeld mithilfe von CSS-Stilen einrichten. Durch diese Stileinstellungen können wir das Textfeld schöner und praktischer gestalten und das Benutzererlebnis verbessern. Ich hoffe, dass dieser Artikel für Ihre Arbeit in der Webentwicklung hilfreich sein kann.
Das obige ist der detaillierte Inhalt vonCSS-Set-Textfeld. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
