input type placeholder is not working same in all the browsers

Question

I have a Input type

<input type="text" name='linkLabel{{index}}' autocomplete="off" class="input-large tight-form-url last remove-cross" required="required" placeholder="{{'linkLabel'| translate}}" style="width:159px" ng-model="linked.label">
            <br/>

My placeholder is not working same in all the browsers.

Text inside the input type is coming as red in mozila and IE browser, But in chrome it is coming as black.

How to change the color in IE and mozilla from red to black. ?

Thanks!!

Don't you think this is more of a `css` question ? If you do, why didn't you add `css` in your post ? — Rayon, Jul 13 '16 at 05:19
http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Vitorino fernandes, Jul 13 '16 at 05:21

score 1 · Accepted Answer · edited Jul 13 '16 at 06:23

1

Try this...

::-moz-placeholder { //Firefox 
  color: black;
}
:-ms-input-placeholder { //IE
  color: black;
}

edited Jul 13 '16 at 06:23

Rohit416

3,416
3
24
41

answered Jul 13 '16 at 05:25

Jefsama

553
9
29

score 1 · Answer 2 · answered Jul 13 '16 at 05:28

How to change the color in IE and mozilla from red to black. ?

You can use :-ms-input-placeholder pseudo class selector to change the color in IE 10+ browsers.

:-ms-input-placeholder 
{       
    color: red;
}

Works for Firefox 19+.

::-moz-placeholder 
{
  color: red;
}

More info here.

score 0 · Answer 3 · edited Jul 13 '16 at 06:12

Try this

input[type="text"]:-webkit-input-placeholder { color: #000;  /* Set Your Color */ }

input[type="text"]:-moz-placeholder { opacity: 1; color: #000;  /* Set Your Color */ }

input[type="text"]:-moz-placeholder { color: #000;  /* Set Your Color */ }

input[type="text"]:-ms-input-placeholder{ color: #000;  /* Set Your Color */ }

input[type="text"].placeholder { color: #000;  /* Set Your Color */ }

input type placeholder is not working same in all the browsers

3 Answers3