Menu
I have a placeholder text inside an input form field that i can't seem to change color to white, it comes out as grey but only on firefox. Chrome browser seems to be fine.
When you type into the field the correct color displays, its just the initial placeholder that is not responsive.
Any help will be appreciated please, thank you.
css:
input#myinput::-webkit-input-placeholder { color:#FFF; background-color:#CCC; } input#myinput::-moz-placeholder { color:#FFF; background-color:#CCC; } input#myinput:-moz-placeholder { color:#FFF; background-color:#CCC; } input#myinput::-ms-input-placeholder { color:#FFF; background-color:#CCC; } /* IE10+ */ input[type="text"]{ width:170px; height:16px; padding:12px 5px; border:none; color:#FFF; font:14px/14px 'Arial', Helvetica, sans-serif; text-align:center; background-color:#CCC; } Heres my fiddle
927
<input type="text" placeholder="A red placeholder text..">
Change Input Placeholder Text with CSS You can use the ::placeholder pseudo-element to change the styles of the placeholder text, which includes the ability to change the background. The code in this example uses a Sass function to generate code for support in older browsers as well.
Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.
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.
Add opacity: 1 to the Firefox placeholders.
See updated fiddle
161
//PLACEHOLDER EXAMPLE ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #666; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #666; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #666; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #666; } 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
