Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS color for placeholder html [duplicate]

Tags:

html

css

I am trying to change the text colour in the placeholder. It just works with the browser Firefox.

There is my HTML

<form name="sentMessage" class="form-horizontal" role="form"  novalidate>
<div class="control-group">
<div class="controls">
<input type="text" class="form-control" placeholder="Full Name" id="name" name="name" required data-validation-required-message="Please enter your name" style="resize:none; color: #BC987E; background-color: #808080; border-color:#808080"/>
<p class="help-block"></p>
</div>
</div>     
<div class="control-group">
<div class="controls">
<input type="email" class="form-control" placeholder="Email" id="email" name="email" required data-validation-required-message="Please enter your email" style="resize:none; color: #BC987E; background-color: #808080; border-color:#808080"/>
<p class="help-block"></p>
</div>
</div>  
<div class="control-group">
<div class="controls">
<textarea rows="10" cols="100" class="form-control" placeholder="How can I help you?" id="message" required data-validation-required-message="Please enter your message" minlength="5" data-validation-minlength-message="Min 5 characters" maxlength="999" style="resize:none; color: white; background-color: #808080; border-color:#808080"></textarea>
<p class="help-block"></p>
</div>
</div>        
<div id="success"> </div> <!-- For success/fail messages -->
<button type="submit" class="btn btn-primary pull-right">Send</button><br/>
</form>

and there my CSS

#name:-moz-placeholder,
#email:-moz-placeholder 
{
color:    white;
}

#name::-moz-placeholder,
#email::-moz-placeholder 
{
color:    white;
}

#name:-ms-input-placeholder,
#email:-ms-input-placeholder  
{
color:    white;
}

On the web page I have implemented Bootstrap. There is the link. Any suggestions that why my code is only working in Firefox. Thanks in advance.

like image 208
David Moya Avatar asked Oct 19 '22 22:10

David Moya


1 Answers

http://css-tricks.com/snippets/css/style-placeholder-text/

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

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}
like image 54
Vitorino fernandes Avatar answered Oct 30 '22 16:10

Vitorino fernandes