ブートストラップのフォームの色を変更する

Question

私は自分のブートストラップサイトにシンプルなフォームを用意していますが、白い背景の基本的なグレーのテキストの代わりに、灰色の背景に白いテキストが必要です。私は灰色の背景を処理することができましたが、プレースホルダを変更したり、テキストの色を入力したりすることはできません。

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

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

ここ番目のためのFelda @BenあなたjsFiddle

感謝のフォークですeリンク。

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

Answer 3

私は質問には、デフォルトのブートストラップCSS上のクラスを置くことについてです知っているが、ソースからブートストラップをコンパイルするそれらのためにあなたは//== Forms怒鳴るbootstrap/variables.lessファイル内のいくつかの変数を変更することにより、これを行うことができます。

//== 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;