更改Bootstrap的窗体颜色

我的Bootstrap网站中有一个简单的窗体，但不是白色背景上的基本灰色文本，而是灰色背景上的白色文本。我能够照顾灰色的背景，但我似乎无法改变占位符或输入文字的颜色。更改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; 
}

来源

2013-02-15 Brian

这一条可能帮助你：改变颜色的占位符（http://stackoverflow.com/a/2610741/1130908） – 2013-02-15 21:14:00

我想这就是你要找的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联邦土地发展局的第一个叉e链接。

来源

2013-02-15 21:25:47 RandomWebGuy

你打我吧... – 2013-02-15 21:43:37

这引起了我1/2的方式那里，但由于某种原因，它没有呈现我的前两个字段，只有最后一个是文本区域。我使用[此链接]（http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css/2610741#2610741）让我100％。我会发布我的解决方案。奇怪的是它在JSFiddle中如何完美呈现，但不是当我复制并将其粘贴到我自己的代码中时。谢谢您的帮助！ – Brian 2013-02-15 22:02:06

@Brian如果我不得不猜测;我猜想它与您包含样式的顺序有关。 – RandomWebGuy 2013-02-15 22:05:35

#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-15 22:05:26 Brian

我知道这个问题是有关放置在类的默认引导CSS，但对于那些从源代码编译引导您可以通过更改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;

来源

2015-11-11 17:24:55 DutGRIFF

更改Bootstrap的窗体颜色

回答

相关问题