Skip to content Skip to sidebar Skip to footer

How To Format Input Placeholder Text For The Opera Browser?

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

Solution 1:

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.

Solution 2:

Opera supports placeholder text styling starting from version 22.0.1471.70 (17 June, 2014), so above CSS works now.

Solution 3:

You can style the placeholders like so:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: pink;
}
::-moz-placeholder { /* Firefox 19+ */color: pink;
}
:-ms-input-placeholder { /* IE 10+ */color: pink;
}
:-moz-placeholder { /* Firefox 18- */color: pink;
}

I would suggest to check this link to check for browser compatibility: https://caniuse.com/#search=input-placeholder

Post a Comment for "How To Format Input Placeholder Text For The Opera Browser?"