In the CSS pseudo-element, the placeholder selector is used to customize the placeholder text by altering the text color and style.
The ::first-line pseudo-element is the only relevant CSS property subset that may be used in a rule with the selector ::placeholder. The placeholder text is a transparent or light grey color for most browsers by default.
Syntax:
::placeholder {
// CSS code
}
In the CSS pseudo-element, the placeholder selector generates the placeholder text by changing the text color and allowing modifications to the text style. The placeholder text within the input tag typically appears in grey across various browsers. Non-standard ::placeholder selectors, which incorporate the color property within that specific selector, offer the ability to adjust the color of the placeholder text. However, the implementation of this feature may vary across different browsers such as Google Chrome, Mozilla Firefox, and Opera.
The sample scenarios will assist us in understanding the concept of the ::placeholder selector and how it is applied.
Examples
In this instance, the ::placeholder selector is employed to modify the color of the text and the background color of the placeholder text.
<html>
<head>
<title>Example for ::placeholder selector</title>
<style>
input::placeholder {
background-color: pink;
margin: 10px;
padding: 30px;
color: red;
}
h1 {
color: red;
}
body {
text-align: left;
}
</style>
</head>
<body>
<h1>::placeholder selector</h1>
<p>Name:
<input placeholder="ABC">
</p>
</body>
</html>
Output:
This illustration demonstrates the utilization of the ::placeholder selector to generate placeholder text with an attribute that signifies the hint describing the expected value of an input field.
<html>
<head>
<title>Example for ::placeholder selector</title>
<style>
h1 {
color: red;
}
body {
text-align: left
}
input::placeholder {
background-color: pink;
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>::placeholder</h1>
<h3>::placeholder Selector </h3>
<input type="text" placeholder="Welcome">
<input type="text" placeholder="learners">
</body>
</html>
Output:
This example illustrates how the ::placeholder selectors are utilized in various web browsers.
<html>
<head>
<title>Example for Change Placeholder Color</title>
<style>
::placeholder {
/* Firefox, Chrome, Opera */
color: green;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
</style>
</head>
<body>
<p>Example for Change Placeholder Color</p>
<input type="text" placeholder="Enter your Text">
</body>
</html>
Output:
Output using Chrome
Output using Microsoft Edge
NOTE: Internet Explorer no longer supports the placeholder selection.
In the email attribute of the input element, this code offers a placeholder selector. Placeholder selectors can be applied to various attributes of the input element (such as text, tel, password, etc.) to highlight color changes in those attributes.
<html>
<head>
<title>Example for Change Placeholder Color</title>
<style>
input[type="email"]::placeholder {
/* Firefox, Chrome, Opera */
color: red;
}
input[type="email"]:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: green;
}
input[type="email"]::-ms-input-placeholder {
/* Microsoft Edge */
color: blue;
}
</style>
</head>
<body>
<p>Example for Change Placeholder Color</p>
<input type="email" placeholder="Enter your Email">
</body>
</html>
Output:
Output using Chrome
Output using Microsoft Edge
Output using Internet Explorer
Usability
Text enclosed within placeholders that offers ample color contrast might be mistaken for user input. Additionally, placeholder text typically vanishes once a user starts entering information into a form field. These scenarios could potentially impede the smooth completion of forms, particularly for individuals with cognitive issues.
An alternative method for presenting placeholder details involves placing them adjacent to the input field visually, then utilizing an aria-described attribute to connect them programmatically with their corresponding hints.
With this setup, the hint content remains accessible even after being entered into the input field, and the input field appears empty upon page load. The majority of screen reader technologies utilize aria-describedby to announce the hint.
This method ensures that the input field is free from any previous content when the webpage is loaded, making the hint content readily available even after data is entered. Once the label text for the input is presented, screen reader technologies typically utilize aria-described to relay the hint. Users of screen readers have the option to skip this additional information if it is unnecessary.
High Contrast Mode for Windows
Text content generated within Windows High Contrast Mode will mirror the formatting of user-input text, potentially causing difficulty for some users in differentiating between actual input and placeholder text.
Labels
The <label> element remains unchanged and is not substituted with placeholders. Assistive tools such as screen readers are unable to interpret <input> elements unless a descriptive label has been dynamically linked to an input field through a combination of the for and id attributes.