改变Bootstrap的表单颜色

Question

我在Bootstrap网站上有一个简单的表单,但是在白色背景上不是基本的灰色文本,而是在灰色背景上需要白色文本.我能够处理灰色背景,但我似乎无法更改占位符或输入文本颜色.

一点JSFiddle动作.

这是我的HTML标记:

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

这是我尝试的CSS,背景颜色更改工作,但不是占位符或文本.

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

Answer 1

我认为这是你正在寻找的CSS:

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

如果要将占位符文本设置为#FFF以外的颜色,可以使用以下CSS并更新颜色:

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

这是你的jsFiddle的一个分支

谢谢@Ben Felda的链接.

Answer 2

我知道问题是关于在默认的Bootstrap css上放置类，但是对于从源代码编译Bootstrap的人，您可以通过更改以下bootstrap/variables.less文件中的一些变量来做到这一点//== 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;