Do you think IIT Guwahati certified course can help you in your career?
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.
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,
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.
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
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:
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.
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.
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 a placeholder in CSS?
A placeholder in CSS refers to the text shown in an input field before the user enters any data. It is often used for guiding the user.
What is placeholder syntax?
The placeholder syntax in CSS is ::placeholder, which targets the placeholder text in input fields, allowing customization of its appearance (color, font, etc.).
What is placeholder type?
A placeholder type is an attribute in HTML that specifies the type of input expected in a form field (e.g., text, email, password).
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.
Do visit our website to read more such blogs. Refer to our Guided Path on Code360 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 problems, interview experiences, and interview bundles for placement preparations.
137+ registered 
