Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is ::placeholder in css?
3.
Syntax
3.1.
Example
4.
Usage of ::placeholder in CSS
5.
Some of the Supported Styles
6.
How to change Placeholder color in CSS?
7.
Accessibility Issues
8.
Supported Browsers
9.
Frequently Asked Questions
9.1.
What is the use of :: placeholder pseudo?
9.2.
What is the Moz placeholder in CSS?
9.3.
What is a placeholder type?
9.4.
What are two types of placeholders?
9.5.
What is a placeholder in an image in CSS?
10.
Conclusion
Last Updated: Mar 27, 2024
Easy

::Placeholder in CSS

gp-icon
Basics of javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

Introduction

Cascading Style Sheets, also famously known as CSS, are used to style our web pages. These make our web pages very presentable and user-friendly. We apply CSS in three different ways: inline CSS, internal CSS, and external CSS. We use CSS selectors for implementing internal and external CSS. We will discuss one of these CSS selectors: placeholder CSS.

placeholder css

We will discuss placeholder CSS in detail. With the help of some examples, we will learn about its syntax and various uses. In the last, we will see its supported styles.

What is ::placeholder in css?

A CSS pseudo-element is an element added to a selector that allows you to style a specific part of the selected element. For example, the ::first-letter can be used to style the first letter of the first line of a paragraph. The ::placeholder css is one such CSS pseudo-element used to style the placeholder text.
 

The ::placeholder CSS selector creates form components with placeholder text and allows you to style them. The placeholder text appears as a transparent or light grey color for most of the popular browsers by default.

It is used to set a placeholder text, which as a hint, helps the user to know the format of the required input. For example,

setting a placeholder text

In the above example, the placeholder text helps the user know how the “Full Name” and “Mobile number” need to be entered. Let’s learn about the syntax and how to program this placeholder CSS selector.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Syntax

The following is the syntax for placeholder text,

<input type="Write type here" placeholder="Placeholder text here">

 

And for adding placeholder CSS styling to these, follow the following syntax.

selector::placeholder{
/* Write CSS properties here like font-weight, color, etc.*/…..
}

Example

<!DOCTYPE html>
<html>
<head>
<title>::placeholder selector</title>
 <style>    
    body {
    text-align: center  /*This will align the text of the body tag in the center*/
    }
    input::placeholder {
        font-weight: bold;
        opacity: 0.3;
        color: blue;
    }    
 </style>
</head>

<body>
    <p> First Name:  <input type="text" placeholder="e.g. Kanishk"> </p>
    <p> Last Name:  <input type="text" placeholder="e.g. Singla"> </p>
    <p> Mobile number:  <input type="Mobile number" placeholder="+91 98765-43210"> </p>
    <p> Email:  <input type="email" placeholder="e.g. xyz@gmail.com"> </p>
</body>

</html>

 

Output

output of setting a placeholder text

Usage of ::placeholder in CSS

The usage of ::placeholder in CSS are:-

  • It targets placeholder text in input fields and textareas
     
  • Enables specific styling like color, font-size, and font-family
     
  • Improves form element presentation
     
  • Provides clear and appealing input prompts for users

Some of the Supported Styles

The following are some examples of the supported styles by placeholder CSS selector:

  • Font properties:- We can change the color, font style, font opacity, etc., using CSS properties.
     
  • Alignment:- This decides the alignment of our text on the web page.
     
  • Color:- This placeholder CSS property is used to change font color, background color, the color of borders, etc.
     
  • Opacity:- This CSS property defines the element's visibility, or you can say the extent to which the content behind an element is obscured.
     
  • Text-indent;- This property is used to define the indentation for a block/line of code.
     
  • Text-transform:- This property is used to capitalize the text of the element. It can change the text to uppercase, lowercase, or capitalize on each word.
     
  • Background properties:- These properties are used to define the background effects on an element.
     
  • Word-spacing:- We can change the spacing between the words using this property. A positive value depicts an increase in current spacing, and a negative shows a decrease.

How to change Placeholder color in CSS?

To change the placeholder color in CSS, you can use the ::placeholder pseudo-element along with the color property. See the below steps to change placeholder color in CSS:

Step 1: Select the Input Element:


input::placeholder {
   /* CSS rules */
}


This selector targets the placeholder text within an input field.

Step 2: Set the Color Property:


input::placeholder {
   color: #999; /* Desired color value */
}


Replace #999 with the color value you want for the placeholder text.

Step 3: Putting it all together, the complete CSS code would look like this:


input::placeholder {
   color: #999; /* Desired color value */
}


This CSS code sets the placeholder color to a light gray (#999). You can replace #999 with any valid color value (hex, RGB, or named color) to achieve the desired visual effect.

Accessibility Issues

Sometimes, the placeholder text is not accessible. Every day, our software and modern browsers are improving, but we still need to eliminate these issues completely. Three of the major accessibility concerns are as follows:
 

  1. The default color for placeholder text in all modern browsers is light grey. Light grey color has poor color contrast against most of the backgrounds, and this affects its visibility. Also, not all browsers allow you to modify placeholder text with CSS, which sometimes becomes a problem.
     
  2. Blind or visually impaired users use the screen reader to read the text aloud. Some of these screen readers do not read the placeholder text; because of this, the user misses the hint.
     
  3. Many users with cognitive or motor limitations face many issues. Some of these issues are: disappearing placeholders raise memory load; persistent dimmable placeholders appear clickable but aren't; and placeholders that don't disappear demand extra input to delete.

Supported Browsers

The ::placeholder pseudo-element is supported by most modern browsers, including:

  • Google Chrome
  • Mozilla Firefox
  • Apple Safari
  • Microsoft Edge
  • Opera
  • Internet Explorer 10 and later

 

Frequently Asked Questions

What is the use of :: placeholder pseudo?

The ::placeholder pseudo-element in CSS is used to style the placeholder text within input fields and textareas.

What is the Moz placeholder in CSS?

::moz-placeholder (or :-moz-placeholder) is a vendor-prefixed version used specifically for Mozilla Firefox.

What is a placeholder type?

Placeholder types refer to different data types (e.g., text, numbers) that can be used as input hints in form fields.

What are two types of placeholders?

There are two types of placeholders: HTML placeholders (defined in the HTML code) and CSS placeholders (styled using ::placeholder in CSS).

What is a placeholder in an image in CSS?

In CSS, a placeholder in an image refers to the space reserved for an image defined by the ::placeholder property, typically used for indicating where an image will be displayed.

 

Conclusion

We hope this article was insightful and you learned something new. In this blog, we learned about the placeholder selector, which helps to style the placeholder text. We learned about its syntax with the help of some examples. We also discussed some of the supported styles by placeholder css. In the end, we saw some of the accessibility issues.
 

If you want to learn more about CSS, do visit

 

Do visit our website to read more such blogs. Refer to our Guided Path on Coding Ninjas Studio to upskill yourself! You can check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! If you are looking for questions asked by tech giants, in that case, you must look at the problemsinterview experiences, and interview bundles for placement preparations.
 

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!!

Previous article
CSS Box Model
Next article
CSS Selectors
Guided path
Free
gridgp-icon
Basics of javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass