Placeholder in CSS

A placeholder in CSS, often referred to as a "pseudo-class," serves as a distinct selector that focuses on specific conditions or situations of an HTML element. These placeholders enable the customization of styles for elements based on their state or position within the document, all without altering the HTML layout or adding additional classes or IDs.

A colon is used after the pseudo-class name to signal placeholders. For example, placeholders such as ":hover," ":active," ":focus," and so on, are commonly employed in CSS.

Let's begin by covering fundamental ideas prior to delving into advanced applications of placeholders in CSS.

Basics of Placeholders in CSS

1. Format: When incorporating a placeholder, apply it to the designated selector using the syntax provided below:
Example
Copy
selector:pseudo-class {
     /* CSS rules for the pseudo-class state */
   }
Try it Yourself

One commonly used placeholder is ':hover'. When a user hovers their mouse over an element, it gets selected.

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

1. :active: When an element is active or clicked by the visitor, this targets that element.
Example
Copy
/* Example: Change text color when the button is clicked */
    button:active {
      color: #00ff00;
   }
Try it Yourself
2. :focus: When an element acquires attention, which frequently happens by keyboard navigation or clicking, this targets the element.
Example
Copy
/* Example: Change border color when an input field is in focus */
   input:focus {
     border-color: #0000ff;
   }
Try it Yourself

Advanced Use Cases of Placeholders in CSS

3. :nth-child: This placeholder chooses items according to their rank among siblings. It takes a formula (an + b) as an argument.
Example
Copy
/* 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;
   }
Try it Yourself
4. :not: The selection of elements that do not match the specified selector is therefore rendered invalid.
Example
Copy
/* Example: Select all links except those with the class "special" */
   a:not(.special) {
     text-decoration: underline;
   }
Try it Yourself
5. : first-child, : last-child: These placeholders point to a parent container's start and final child components.
Example
Copy
/* 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;
   }
Try it Yourself
6. :before and :after: These insertion points add text before or after the chosen element.
Example
Copy
/* Example: Add a bulleC# Tutorial before listing items */
   li:before {
     content: "\2022";
     margin-right: 5px;
   }
Try it Yourself
7. :checked: This aims towards checked input components like checkboxes and radio buttons.
Example
Copy
/* Example: Style a checked checkbox differently */
   input[type="checkbox"]:checked {
     border-color: #00ff00;
   }
Try it Yourself
8. :valid and :invalid: Depending on the input elements' status for validation, such placeholders target them.
Example
Copy
/* Example: Style valid and invalid input fields */
   input:valid {
     border-color: #00ff00;
   }
   input:invalid {
     border-color: #ff0000;
   }
Try it Yourself

These represent just a handful of examples of CSS's basic and intricate placeholders. A wide array of pseudo-classes and pseudo-elements exist, each offering unique functionalities and behaviors. Pseudo-selectors offer a powerful way to style elements based on their positions and conditions, enriching CSS with dynamic and engaging possibilities.

How to Change Placeholder Color

You have the option to employ CSS for changing the color of the placeholder text in an input field or text area component. To target the placeholder text specifically within an input or text area element, make use of the '::placeholder' pseudo-element. The following outlines the process for adjusting 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 pseudo-elements and pseudo-classes in CSS, which stand for Cascading Style Sheets, are employed to apply different states and styles to elements on a webpage. They allow for targeting elements based on specific conditions without the need for extra HTML markup. Below is a comparison between these two CSS features:

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