To hide the placeholder text of an input field using CSS, you can use the ::placeholder
pseudo-element. This pseudo-element allows you to style the placeholder text of an input or textarea element.
Here's how you can hide the placeholder text:
input::placeholder, textarea::placeholder {
color: transparent;
opacity: 0; /* This is for better cross-browser compatibility */
}
This CSS rule sets the color of the placeholder text to transparent
and its opacity to 0
, effectively hiding it.
Note that browser support for the ::placeholder
pseudo-element is good in modern browsers, but if you're targeting older browsers, you might need vendor prefixes:
/* Firefox 19+ */
input::-moz-placeholder, textarea::-moz-placeholder {
color: transparent;
opacity: 0;
}
/* Internet Explorer 10-11 */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: transparent;
opacity: 0;
}
/* Edge 12+ */
input::-ms-input-placeholder, textarea::-ms-input-placeholder {
color: transparent;
opacity: 0;
}
/* Chrome, Safari, and newer versions of Opera */
input::placeholder, textarea::placeholder {
color: transparent;
opacity: 0;
}
However, in most cases, the unprefixed version should suffice for modern web development.