::placeholder CSS Pseudo Element

Description

The ::placeholder pseudo-element in CSS is used to style the placeholder text within HTML form elements, such as input fields and textareas. Placeholder text is the text that appears inside an input field as a hint or example of what the user should enter.

By applying styles to ::placeholder, you can change its appearance to better match the overall design of your website or application. This includes modifying attributes like color, font-size, font-family, and text-decoration, among others.

Here's a simple example of how you might use the ::placeholder pseudo-element in CSS:

/* Change the color and font-style of placeholder text */
input::placeholder {
color: #999;
font-style: italic;
}

/* Change the font-size and font-weight of placeholder text in a textarea */
textarea::placeholder {
font-size: 14px;
font-weight: bold;
}

In this example, the placeholder text for input elements will appear in a grayish color and italic font style, while the placeholder text for textarea elements will be larger and displayed in bold. This helps improve the visual consistency and usability of web forms.

Syntax

::placeholder {
  /* ... */
}

Example

<div class="form">
<input type="text" placeholder="What is your first name?"><br><br>
<input type="text" placeholder="What is your surname?">
</div>
.form {
border: 1px solid blue;
background: #ccc;
margin: 20px;
padding: 30px;
width: 250px;
}
input::-moz-placeholder {
color: green;
}
input::-webkit-input-placeholder {
color: green;
}
input:-ms-input-placeholder {
color: green;
}
input::-ms-input-placeholder {
color: green;
}
input::placeholder {
color: green;
}

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::placeholder pseudo element.

Desktop
Edge Chrome Firefox Opera Safari
7957514410.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
57514310.3757

Last updated by CSSPortal on: 1st October 2023