更改 Bootstrap 的表单颜色答案

【问题标题】：Changing Bootstrap's form colors更改 Bootstrap 的表单颜色
【发布时间】：2020-05-17 20:11:20
【问题描述】：

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

【问题讨论】：

这个可以帮到你：Changing Placeholder Color

标签： html css twitter-bootstrap

【解决方案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 提供链接。

【讨论】：

这让我走了 1/2 路，但由于某种原因，它没有呈现我的前 2 个字段，只有最后一个是文本区域。我使用this link 让我达到 100%。我会发布我的解决方案。奇怪的是它如何在 JSFiddle 中完美呈现，但当我将它复制并粘贴到我自己的代码中时却不是这样。感谢您的帮助！
@Brian 如果我不得不猜测的话；我猜这与您包含样式的顺序有关。
FML 现在我的输入背景切换回白色。我的网页出现代码扣押。
@Brian 你在使用 FireBug 吗？如果是这样，您应该查看样式被覆盖的位置。

【解决方案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-placeholder-color:        #fff;  // You probably want this to be a little different color. Maybe #999;

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

您想要对输入执行的操作 - 将其添加到您的样式中：

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

如果要将其应用于有限的输入组，您可以这样指定：

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

它对我有用。希望它也适合你。干杯！

【讨论】：