how to format input placeholder text for the Opera browser?

Question

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;
}

Gigantic

possible duplicate of Change an input's HTML5 placeholder color with CSS – Late

possible duplicate states opera does not support placeholder. Does not offer any alternate solutions to style placeholder text in Opera. – Gigantic

Answer 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.

Showroom

While I certainly have no problem using a JS solution, I was curious how to solve this with HTML and CSS – Gigantic

Then all you need is just to wait until it's standardized and implemented in unprefixed form in just a few years. ;-) By the way, Opera is switching to Chromium engine (currently in alpha state), so webkit-prefixed temporary solution should work in Opera 15 once it's released. – Showroom

I've waiting long enough for someone else to offer a HTML/CSS solution and with none forthcoming I can only assume there isn't one that anyone is aware of at this point which leaves Marat with having the best answer given the current state of Opera. – Gigantic

Answer 2

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

Maidenhood

Answer 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

Garfish