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.

Hope you like this article; please share your comments below.






Was this page helpful? YES NO

Are you a blogger? Join our Blogging forum.



Comments and Discussions





© https://www.includehelp.com (2015-2018), Some rights reserved.




Like other websites, this site uses cookies to deliver relevant ads based on your interest, by using our website, you acknowledge that you have read our privacy policy.
Close