Styling HTML Input Placeholders with CSS

Placeholders are a useful feature in HTML forms, providing a hint or example of the expected input. However, by default, placeholder text is displayed in a gray color that may not match your website’s design. Fortunately, you can change the color and style of placeholders using CSS.

To style an HTML input placeholder, you need to use vendor-specific pseudo-elements or pseudo-classes. The most common ones are:

• ::-webkit-input-placeholder for WebKit-based browsers (Chrome, Safari, Opera)
• :-moz-placeholder for Mozilla Firefox 4 to 18
• ::-moz-placeholder for Mozilla Firefox 19+
• :-ms-input-placeholder for Internet Explorer 10-11
• ::placeholder for most modern browsers

You can use these pseudo-elements or pseudo-classes to set the color, font size, and other styles of the placeholder text. For example:

::-webkit-input-placeholder {
    color: #909;
}
:-moz-placeholder {
    color: #909;
    opacity: 1;
}
::-moz-placeholder {
    color: #909;
    opacity: 1;
}
:-ms-input-placeholder {
    color: #909;
}
::placeholder {
    color: #909;
}

Note that you should not group these rules, as one invalid selector in a group can make the whole group invalid. Instead, create separate rules for each pseudo-element or pseudo-class.

You can also style textarea placeholders using the same technique:

textarea::-webkit-input-placeholder {
    color: #909;
}
textarea:-moz-placeholder {
    color: #909;
    opacity: 1;
}
textarea::-moz-placeholder {
    color: #909;
    opacity: 1;
}
textarea:-ms-input-placeholder {
    color: #909;
}
textarea::placeholder {
    color: #909;
}

When styling placeholders, be careful to avoid bad contrasts and ensure that the text is readable. You should also test your styles in different browsers and devices to ensure compatibility.

In addition to styling placeholders, you can also use other CSS properties to customize the appearance of your input fields, such as background-color, border, and padding. However, some browsers may not support all of these properties for placeholder text, so be sure to test your styles thoroughly.