Html 更改 Bootstrap 的表单颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14903205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Bootstrap's form colors
提问by Brian
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.
我的 Bootstrap 站点中有一个简单的表单,但我想要灰色背景上的白色文本,而不是白色背景上的基本灰色文本。我能够处理灰色背景,但我似乎无法更改占位符或输入文本颜色。
A little JSFiddleaction.
一个小的JSFiddle动作。
Here is my HTML markup:
这是我的 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-->
Here is the CSS I tried, the background color change works, but not the placeholder or text.
这是我尝试过的 CSS,背景颜色更改有效,但占位符或文本无效。
#Email, #Fname, #Message{
background-color:#666;
}
#Email placeholder, #Fname placeholder, #Message placeholder{
color:#FFF;
}
#Fname text{
color:#FFF;
}
回答by RandomWebGuy
I think this is the CSS you're looking for:
我认为这是您正在寻找的 CSS:
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:
如果您想让占位符文本的颜色不是 #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;
}
Here's a fork of your jsFiddle
这是你的jsFiddle的一个分支
Thanks @Ben Felda for the link.
感谢@Ben Felda 提供链接。
回答by DutGRIFF
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
.
我知道问题是关于将类放在默认的 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;
回答by Brian
#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;
}
回答by Konstantin Bashenko
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!
这个对我有用。希望它也适合你。干杯!