Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
}
like image 667
BitBug Avatar asked Mar 29 '13 00:03

BitBug


People also ask

How do you style a placeholder text?

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.

How do I change placeholder position?

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.

What do you put in input placeholder?

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.


2 Answers

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.

like image 182
Marat Tanalin Avatar answered Sep 20 '22 17:09

Marat Tanalin


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

like image 28
lakesare Avatar answered Sep 21 '22 17:09

lakesare