ADVERTISEMENT
ADVERTISEMENT

How to change an HTML5 input placeholder color with CSS?

Learn how to change an HTML5 input placeholder color with CSS?
Submitted by Shahnail Khan, on March 03, 2022

Do you want to make your website or web page stand out from other websites and be a successful frontend web developer? Well, the HTML code alone won't work, you need to style by using various properties of CSS. There are many attributes and selectors available in CSS which are used to style HTML5 elements, making it look more user-friendly. Different CSS selectors are used to target elements in HTML5 for changing text color, font, font size, text alignment, and many more. This article has got you covered on how to change an HTML5 input's placeholder color with CSS?

What is a placeholder attribute?

The placeholder attribute is used in HTML5 to suggest users on entering the correct syntax through an illustration of an example. The format is displayed by the browser before the user enters a value. It is mostly used with <input> element of HTML where the user enters name, age, contact no, etc.

The syntax is something like this:

<input type="text" placeholder="Enter your name">

How does placeholder attribute work?

For implementing the change or designing the placeholder attribute, a CSS selector, namely, a placeholder selector is used. It is used in altering placeholder text by changing text color, font, font size, etc. We will specifically talk about changing the placeholder's input color.
The default color of placeholder text is "grey" in most browsers. In case you want to change the color of placeholder text color, the syntax is:

:: placeholder{
	color: brown; /*You can add the color of your choice*/
}

Well, this syntax is valid for most browsers like Google Chrome, Opera, Firefox, etc. For Microsoft Edge, in place of ::placeholder, you have to write ::-ms-input-placeholder.

Let's understand this through a code.

Example (1):

<!DOCTYPE html>
<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:purple;
         }
      </style>
   </head>
   <body>
      <p>Enter your name</p>
      <input type="text" placeholder="Text only">
   </body>
</html>

Output:

output: HTML5 input placeholder color with CSS

The following code is written in VS Code. As you can see, ::placeholder selector is used in Style CSS to change the placeholder text color to purple. We have used the <input> tag to enter the text. It will only accept letters and for user convenience, the placeholder attribute is also used.

Example (2):

<!DOCTYPE html>
<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: blue;
      }
   </style>
   <body>
      <h2> 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>

Output:

output: HTML5 input placeholder color with CSS (2)

Here, we first created a Form in HTML. The <form> tag is used to create a form in HTML5. The color of the placeholder text is changed for all the three <input> elements in form using ::placeholder selector.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.