Changing Bootstrap's form colors

Question

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;
}

This one might help you out: [Changing Placeholder Color](http://stackoverflow.com/a/2610741/1130908) — Ben Felda, Feb 15 '13 at 21:14

score 19 · Answer 1 · answered Feb 15 '13 at 21:25

19

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.

answered Feb 15 '13 at 21:25

RandomWebGuy

1,439
11
23

This got me 1/2 way there, but for some reason it didn't render my first 2 fields, only the last one which was a text area. I used [this link](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741) to get me to 100%. I'll post my solution. Weird how it rendered perfectly in JSFiddle, but not when I copy and pasted it into my own code. Thanks for the help! – Brian Feb 15 '13 at 22:02
@Brian If I had to guess; I'd guess that it has to do with the order in which you've included the styles. – RandomWebGuy Feb 15 '13 at 22:05
FML now my input backgrounds switched back to white. My web page is having code seizures. – Brian Feb 15 '13 at 22:11
@Brian Are you using FireBug? If so you should look to see where the styles are being overridden. – RandomWebGuy Feb 15 '13 at 22:14

score 7 · Answer 2 · edited May 17 '20 at 12:11

I know the question is about placing classes over the default Bootstrap css but for those compiling Bootstrap from source you can do this by changing a few variables in the bootstrap/variables.less file bellow //== Forms.

//== Forms
//
//##

//** `<input>` background color
$input-bg:                       $gray;

//** Text color for `<input>`s
$input-color:                    #fff;

//** Placeholder text color
$input-placeholder-color:        #fff;  // You probably want this to be a little different color. Maybe #999;

score 2 · Answer 3 · answered Feb 15 '13 at 22:05

#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;
}

score 1 · Answer 4 · answered Aug 19 '18 at 19:15

What you want to do with your inputs - is to add this to your styles:

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

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

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

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

In case to apply it to a limitet group of inpust, you can specify it like this:

.custom-style-name input::-webkit-input-placeholder {
color: red !important;
}

.custom-style-name input:-moz-placeholder { /* Firefox 18- */
color: red !important;  
}

.custom-style-name input::-moz-placeholder {  /* Firefox 19+ */
color: red !important;  
}

.custom-style-name input:-ms-input-placeholder {  
color: red !important;  
}

It works for me. Hope it will for you too. Cheers!

Changing Bootstrap's form colors

4 Answers4