Menu
I have styled placeholder text with CSS using the psuedo elements and pseudo classes below. This gets the job done on all major browsers but Opera. My understanding is Opera does not support styling placeholder text. Does anyone know of a way to style Opera input placeholder text?
CSS
::-webkit-input-placeholder {
color: red;
font-size: 10px;
}
::-moz-placeholder {
color: red;
font-size: 10px;
}
:-moz-placeholder {
color: red;
font-size: 10px;
}
:-ms-input-placeholder {
color: red;
font-size: 10px;
}
input:-moz-placeholder {
color: red;
font-size: 10px;
}
667
Use the ::placeholder pseudo-element to style your placeholder text in an <input> or <textarea> form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.
In most of the browsers, placeholder texts are usually aligned in left. The selector uses text-align property to set the text alignment in the placeholder. This selector can change browser to browser.
The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value.
Both existing ways to style placeholder available in Firefox and WebKit are vendor-prefixed and nonstandard and should not be used in production. For future-proofness, use JavaScript to remove placeholder attribute and use either value (in conjunction with a class like placeholder to bind placeholder styles to) of form field or an additional text element to emulate placeholder functionality. This will work consistently across browsers (current and future ones) including Opera.
182
Opera supports placeholder text styling starting from version 22.0.1471.70 (17 June, 2014), so above CSS works now.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
