更改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的窗體顏色

回答

相關問題