CODEWITHSUNDEEP
htmlcssinputoperaplaceholder
BitBug
BitBug

Reputation: 699

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

Upvotes: 6

Views: 3511

Answers (3)

Manuel Abascal
Manuel Abascal

Reputation: 6368

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

Upvotes: 1

Evgenia Karunus
Evgenia Karunus

Reputation: 11232

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

Upvotes: 2

Marat Tanalin
Marat Tanalin

Reputation: 14123

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.

Upvotes: 5

Related Questions