Home » CSS

Styling input placeholder with CSS

Input placeholders are the text that are replaced with the content when user starts typing. In this article, we are going to learn to make Input placeholder with code and explanation.
Submitted by Abhishek Pathak, on October 09, 2017

HTML form inputs are one of the ways to collect data from user and send to server using the HTML form. While they are so popular and widely used, it is important that they look good in terms of design and function well.

Input placeholders are the text that are replaced with the content when user starts typing. So it is important that they look good and with CSS we can take care of the design.

Here is a simple HTML structure:

<form action="/">
  <input type="text" name="name" placeholder="Your Name">
  <input type="submit" value="Submit">
</form>

CSS Code:

input::placeholder {
  font: 400 1.2em/1 "Verdana";
  color: #f56;
}

In the CSS, we are targeting the placeholder psuedo class using the ::placeholder selector. Inside it, we define the font styling using the shorthand font property and color of the placeholder.

Though there are lot of styling options, but try to keep as aesthetic as possible for a wonderful user experience.