Change bootstrap shape colors

Question

I have a simple form on my Bootstrap website, but instead of the basic gray text on a white background, I want white text on a gray background. I was able to take care of the gray background, but I cannot change the placeholder color or input color.

A bit of JSFiddle action.

Here is my HTML markup:

<div class="span6" id="email-form"> <form name="contact-form" id="contact-form" method="post" action="form-processing.php"> <input class="span6" name="Name" id="Fname" type="text" placeholder="Your name" required> <input class="span6" name="Email" id="Email" type="email" placeholder="Your email" required> <textarea class="span6" name ="Message" id="Message" type="text" rows="10" placeholder="What services will you be requiring?" required></textarea><br> <button type="submit" class="btn btn-primary">Send</button> <button type="clear" class="btn">Clear</button> </form><!--/.span6--> </div><!--/#email-form--> 

Here is the CSS I tried, the background color change works, but not the placeholder or text.

 #Email, #Fname, #Message{ background-color:#666; } #Email placeholder, #Fname placeholder, #Message placeholder{ color:#FFF; } #Fname text{ color:#FFF; } 

Answer 1

I think this is the CSS you are looking for:

 input, textarea{ background-color:#666; color: #FFF; } 

If you want the placeholder text to be in a color other than #FFF, you can use the following CSS and update the color:

 ::-webkit-input-placeholder { /* WebKit browsers */ color: #FFF; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #FFF; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #FFF; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #FFF; } 

Here is the fork of your jsFiddle

Thanks @Ben Felda for the link.

Answer 2

 #Email, #Fname { background-color:#666; } input, textarea{ background-color:#666; color: #FFF; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #FFF; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #FFF; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #FFF; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #FFF; } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #FFF; } input:-moz-placeholder, textarea:-moz-placeholder { color: #FFF; } 

Answer 3

I know that the question is about placing the default classes for the boot buffer, but to compile Bootstrap from the source, you can do this by changing a few variables in the bootstrap/variables.less file below //== Forms .

 //== Forms // //## //** `<input>` background color $input-bg: $gray; //** Text color for `<input>`s $input-color: #fff; //** Placeholder text color $input-color-placeholder: #fff; // You probably want this to be a little different color. Maybe #999;