Ändern die Farbe eines HTML5-Eingabeplatzhalters mit CSS
Wenn Sie möchten, dass sich Ihre Website oder Webseite von der Masse abhebt, reicht der HTML-Code allein nicht aus. Sie müssen es mit CSS-Eigenschaften gestalten.
In CSS können verschiedene Eigenschaften und Selektoren verwendet werden, um HTML5-Komponenten zu stylen und benutzerfreundlicher zu machen. In HTML5 ändern verschiedene CSS-Selektoren Textfarbe, Schriftart, Schriftgröße, Textausrichtung und viele andere Dinge.
In HTML5 führt die Eigenschaft placeholder Benutzer durch die richtige Syntax, indem sie ein Beispiel anzeigt. Bevor der Benutzer einen Wert eingibt, zeigt der Browser das Format an.
Es wird am häufigsten mit dem Eingabeelement von HTML verwendet, mit dem Benutzer Informationen wie Name, Alter, Telefonnummer usw. übermitteln können. In diesem Artikel wird erläutert, wie Sie die Platzhalterfarbe einer HTML5-Eingabe mit CSS ändern.
Ändern Sie die Farbe eines HTML5-Eingabeplatzhalters mit CSS
In diesem Beispiel wird der Selektor :: placeholder in Style CSS verwendet, um die Farbe des Platzhaltertextes in Orange zu ändern. Wir haben den Tag <input> verwendet, um den Text einzugeben.
Es werden nur Buchstaben benötigt. Die Platzhaltereigenschaft wird auch für die Benutzerfreundlichkeit verwendet.
Beispiel 1:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder Color</title>
<style>
::placeholder{/* syntax for Chrome,Firefox,Mozilla browsers*/
color:orange;
}
</style>
</head>
<body>
<p>Please enter your name</p>
<input type="text" placeholder="Text only">
</body>
</html>
Im folgenden Beispiel haben wir mit der Erstellung eines HTML-Formulars mit dem Element <form> begonnen. Mit dem Selektor ::placeholder wird die Farbe des Platzhaltertextes für alle drei <input>-Komponenten im Formular geändert.
Beispiel 2:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Placeholder2</title>
</head>
<style>
::placeholder{
color: green;
}
</style>
<body>
<h2> Please fill the form</h2>
<form>
<input type="text" placeholder="Enter your name"><br>
<input type="number" placeholder="Enter your age"><br>
<input type="email" placeholder="Enter your email-id">
</form>
</body>
</html>