How to Style Placeholder of a Form Input Box

Avatar admin | December 15, 2018

Form design is an important part of every website. Whether it’s a login form, registration form or contact form. Users like to fill a professionally designed form. While designing a form sometimes you need to add styles for placeholder text to make that eye-catching. This is the place where your normal CSS selector will not work. In this post, I am going to explain to you how you can give any type of style to your placeholder text of a form input box and can grab users attention. This is a normal form I have created for you to explain.




<form action="/action_page.php" id="rg-form">
  <input type="text" name="firstname" Placeholder="First Name">
  <input type="text" name="lastname" placeholder="Last Name">
  <input type="email" name="email" placeholder="Email Address">
  <input type="submit" value="Submit">
</form>



Now to style the placeholder text we need to use Pseudo-element selector.

/************** for firefox browser ************/
#rg-form input::-moz-placeholder {
  color: blue;
  font-style:italic;
  padding-left:5px;
}

/***************** for internet explorer **************************/

#rg-form input:-ms-input-placeholder {
  color: blue;
  font-style:italic;
  padding-left:5px;
}

/************** for chrome and other modern browsers *******************/

#rg-form input::-webkit-input-placeholder {
  text-indent: 0;
  color: blue;
  font-style:italic;
  padding-left:5px;
}

Now here it has complete working code with the result.

This is the  Style Placeholder of a Form Input Box with easy steps.


Written by admin


Comments

This post currently has 2 responses.

Comments are closed.


shares