Styling Placeholder Text with the ::placeholder Pseudo-Element in CSS

::placeholder Selector

The ::placeholder selector in CSS is used to style the placeholder text of input fields and textareas in HTML forms. Placeholder text is the text that appears inside an input field or textarea as a hint to the user about what kind of information or data is expected in that field. The ::placeholder selector allows you to customize the appearance of this placeholder text.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::placeholder Selector</title>
    <style>
      ::placeholder {
        color: rgb(141, 141, 231);
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <h3>::placeholder Selector</h3>
    <label for="name">Name</label>
    <input type="text" placeholder="Enter Full Name" />
  </body>
</html>

Live Preview

The CSS code you provided uses the ::placeholder selector to style the placeholder text for input fields and textareas across your HTML document.

::placeholder: This selector targets all placeholder text within input fields and textareas on your webpage. It means that the styling defined in this block will apply to the placeholder text in all input and textarea elements.

color: rgb(141, 141, 231);: This property sets the color of the placeholder text to a specific shade of blue. The color is defined using the RGB (Red, Green, Blue) color model, with values (141, 141, 231), which represents a shade of blue.

font-size: 14px;: This property sets the font size of the placeholder text to 14 pixels. It determines how large or small the placeholder text appears within the input fields and textareas.

It's important to note that browser support for styling the ::placeholder selector may vary, and some older browsers may not fully support all CSS properties applied to it. Therefore, it's a good practice to test your styles in different browsers to ensure consistent rendering of the placeholder text.