Menu
<input type="text" placeholder="test" />
<input type="number" placeholder="test" />
How do I style it?
:-moz-placeholder {
color: red;
opacity: 1;
}
::-moz-placeholder {
color: red;
opacity: 1;
}
Why doesn't the global placeholder work on it, even though firebug shows it's applied? Is it a bug, is it an intention?
http://jsbin.com/papad/1/edit?html,css,output
623
In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholder selector. Note that Firefox adds a lower opacity to the placeholder, so we use opacity: 1 to fix this.
<input placeholder="Stack Snippets are awesome!">
The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field. Tip: The default color of the placeholder text is light grey in most browsers.
The placeholder attribute specifies a short hint that describes the expected value of a number field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the number field before the user enters a value.
To modify the input placeholder color and other properties, you have to use the example CSS as given below: ::placeholder: The selector selects the placeholder of input text and works on major browsers. However, it will not work on Internet Explorer and Microsoft Edge.
The DOM Input Number placeholder Property in HTML DOM is used to set or return the value of the placeholder attribute of a number field. The placeholder attribute specifies the short hint that describes the expected value of an input field. The short hint is displayed in the field before the user enters a value.
Try it Yourself » Step 1) Add HTML: Use an input element and add the placeholder attribute: Example <input type="text" placeholder="A red placeholder text.."> Step 2) Add CSS: In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard ::placeholderselector.
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; ::-ms-input-placeholder { /* Microsoft Edge */ color: red; Try it Yourself » Tip:Read more about the ::placeholder selector in our CSS Reference: CSS ::placeholder Property.
It's apparently a bug:
However, it seems to actually work for some users...
120
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
