13

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

4 回答 4

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.

于 2013-02-15T21:25:47.537 回答
7

我知道问题是关于将类放在默认的 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;
于 2015-11-11T17:24:55.517 回答
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;
}
于 2013-02-15T22:05:26.427 回答
1

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

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

这个对我有用。希望它也适合你。干杯!

于 2018-08-19T19:15:25.463 回答