Placeholder in CSS

A placeholder in CSS, commonly called a "pseudo-class," is a unique selector that targets particular states or circumstances of an HTML element. Placeholders can customize styles to items based on their status or location in the document without changing the HTML structure or introducing new classes or IDs.

A colon follows the pseudo-class name to indicate placeholders. For instance, placeholders like ":hover," ":active," ":focus," etc., are frequently used in CSS.

Let's start with some basic concepts before moving on to more complex use cases for placeholders in CSS.

Basics of Placeholders in CSS

1. Syntax: To use a placeholder, put it to the target selector utilizing the following syntax:

selector:pseudo-class {
     /* CSS rules for the pseudo-class state */
   }

2.`:hover`: One of the most frequently utilized placeholders is ':hover'. Whenever an individual moves their mouse over an element, it becomes targeted.

/* Example: Change background color on hover */
  button:hover {
     background-color: #ff0000;
  }

3. `:active`: When an element is active or clicked by the visitor, this targets that element.

/* Example: Change text color when the button is clicked */
    button:active {
      color: #00ff00;
   }

4. `:focus`: When an element acquires attention, which frequently happens by keyboard navigation or clicking, this targets the element.

 /* Example: Change border color when an input field is in focus */
   input:focus {
     border-color: #0000ff;
   }

Advanced Use Cases of Placeholders in CSS

1. `:nth-child()`: This placeholder chooses items according to their rank among siblings. It takes a formula (an + b) as an argument.

/* Example: Apply different styles to even and odd rows in a table */
   tr:nth-child(even) {
     background-color: #f2f2f2;
   }
   tr:nth-child(odd) {
     background-color: #ffffff;
   }

2. `:not()`: The selection of elements that do not match the specified selector is therefore rendered invalid.

/* Example: Select all links except those with the class "special" */
   a:not(.special) {
     text-decoration: underline;
   }

3. `: first-child, `: last-child: These placeholders point to a parent container's start and final child components.

/* Example: Add margin to the first and last paragraphs within a div */
   div p:first-child {
     margin-top: 10px;
   }
   div p:last-child {
     margin-bottom: 10px;
   }

4. `:before` and `:after`: These insertion points add text before or after the chosen element.

/* Example: Add a bullet point before listing items */
   li:before {
     content: "\2022";
     margin-right: 5px;
   }

5. `:checked`: This aims towards checked input components like checkboxes and radio buttons.

/* Example: Style a checked checkbox differently */
   input[type="checkbox"]:checked {
     border-color: #00ff00;
   }

6. `:valid` and `:invalid`: Depending on the input elements' status for validation, such placeholders target them.

/* Example: Style valid and invalid input fields */
   input:valid {
     border-color: #00ff00;
   }
   input:invalid {
     border-color: #ff0000;
   }

These are only a few illustrations of CSS's simple and complex placeholders. There are many more possible pseudo-classes and pseudo-elements, each with a distinctive behavior and set of applications. Placeholders provide a potent method for styling items according to their placements and states, enhancing CSS's dynamic and interactive nature.

How to Change Placeholder Color

You may use CSS to alter the placeholder text color in an input field or text area element. To specify the placeholder within an input or text area element, utilize the '::placeholder' pseudo-element. Below is how to alter the color of the placeholder:

<!DOCTYPE html>
<html>

<head>
	<title>Change Placeholder Color</title>
	<style>
	::placeholder {
		
		/* Firefox, Chrome, Opera */
		color: blue;
	}
	
	:-ms-input-placeholder {
		
		/* Internet Explorer 10-11 */
		color: red;
	}
	
	::-ms-input-placeholder {
		
		/* Microsoft Edge */
		color: orange;
	}
	</style>
</head>

<body>
	
<p>Change Placeholder Color</p>

	<input type="text" placeholder="Enter your Text">
</body>

</html>

Output

In Google Chrome:

In Internet Explorer:

Difference between Pseudo-element vs Pseudo-class

The CSS (Cascading Style Sheets) feature of pseudo-elements and pseudo-classes are both utilized to provide certain states and styles for elements in a web page. They offer a technique to target items according to specific criteria without adding additional HTML syntax. Here is a contrast between the two:

Feature	Pseudo-element	Pseudo-class
Definition	A pseudo-element is used to style a specific part of an element's content, like the first line, first letter, etc.	A pseudo-class is used to define a specific state or condition of an element, like hover, active, etc.
Syntax	Prefixed with double colons (::)	Prefixed with a single colon (:)
Examples	::before, ::after, ::first-line, ::first-letter	:hover, :active, :focus, :nth-child(n), :nth-of-type(n), etc.
Purpose	Used to add decorative content or layout adjustments before or after an element's content.	Used to apply styles to elements based on user interactions or their position within a parent.
Compatibility	Some older browsers may not fully support all pseudo-elements.	Pseudo-classes have broader browser support.
Browser Support	More recent browser versions generally have good support for pseudo-elements.	Pseudo-classes have better overall support across various browser versions.

Although pseudo-classes and pseudo-elements have different applications, you may frequently combine them to provide web components more complicated and specialised style effects.

Next TopicText Animation in CSS

← prev next →