Let’s start with the HTML:
<form>
<input type="text" placeholder="Enter your text here"><br>
<textarea placeholder="Enter other text here"></textarea>
</form>So, now we want to style the placeholders themselves.
If you want to keep it simple, most modern browsers support this:
::placeholder {
color: #c90000;
}You can use the ::placeholder pseudo-class like any other.
For older browser support it looks like this:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #c90000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #c90000;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #c90000;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #c90000;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #c90000;
}
::placeholder {
color: #c90000;
}So, let’s look at a real-world example:
A simple form. Nothing fancy, but notice the placeholder text for the required email field is a different color. This is one simple example of how you might use something like this.
Here’s the full HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Style HTML Input Placeholders In CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" name="name" class="text" id="name" placeholder="Enter your name here">
</div>
<div class="form-group">
<label for="email">Your email</label>
<input type="email" name="name" class="text email required" id="email" placeholder="Enter your email here (required)" required>
</div>
<div class="form-group">
<input type="submit" value="Submit" class="button submit">
</div>
</form>
</body>
</html>And, here’s the full CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: lightBlue;
font-family: sans-serif;
}
form {
width: 40vw;
background: white;
margin: 10vh auto;
padding: 40px;
border-radius: 1px;
}
.form-group {
margin: 15px 0;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: #444;
}
.text {
box-sizing: border-box;
width: 100%;
padding: 15px 10px;
border: 1px solid lightGrey;
}
.text::placeholder {
color: lightGrey;
font-style: italic;
}
.text.required::placeholder {
color: #c90000;
}
.button {
border: 1px solid #333;
background: #555;
color: white;
padding: 15px 40px;
font-size: 18px;
}So, there you go.
Now, speaking of real-world examples, I have a full course where we build a freelancer sales page from scratch using HTML, CSS, jQuery and a little PHP if you want to keep going with your learning.
In it, you’ll learn about CSS Grid, CSS transitions, making asynchronous requests using jQuery and more.
You can get access to it for nothing over on Skillshare.
Link for details is here: https://johnmorrisonline.com/webdesign
Later,
John
