Changing Bootstrap's form colors

css, html, twitter-bootstrap

Solution

I think this is the CSS you're looking for:

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

If you want to make the place holder text 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's a fork of your jsFiddle

Thanks @Ben Felda for the link.

Problem

I have a simple form in my Bootstrap site, but instead of the basic grey text on a white background, I want white text on a grey background. I was able to take care of the grey background, but I can't seem to change the placeholder or input text color. A little 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; } ```

Original source

Related problems