What is the CSS placeholder selector?
CSS rule is the combination of one or more CSS properties that targets HTML elements and make changes to their style. The CSS rule consists of a CSS selector and a set of CSS properties.
A CSS selector is that component of the CSS rule that determines contents to be styled.
The CSS selector tells the browser which html element’s content should be targeted in order to have the CSS property values applied to them within the rules.
Categories of CSS selectors
The different categories of CSS selectors are:
-
Simple selectors
-
Combinator selectors
-
Pseudo-class selectors
-
Attribute selectors
<style>h1{color:blue;background-color:white;}</style>
What is a placeholder selector?
The placeholder selector, an example of Simple selectors, is an HTML input attribute that gives a hint that describes the expected value of an input field. The placeholder attribute prompts users on what value to enter in a particular field in a form.
<label for="phone">Enter a phone number:</label><br><br><input type="tel" id="phone" name="phone" placeholder="123-45-678"
CSS ::placeholder selector
The ::placeholder selector designates form elements with placeholder text and lets you style them.
Color, depicted as light grey, is the only default style of the placeholder text.
How to style the placeholder selector with CSS
The CSS selector syntax is used as shown in the code below when writing the code to style the placeholder attribute with CSS.
::placeholder {css declarations;}
Changing placeholder text-color to red with CSS
The code widgets below demonstrate how you can style the placeholder text with CSS.
