Thay đổi màu của biểu mẫu Bootstrap

Question

Tôi có một biểu mẫu đơn giản trong trang Bootstrap, nhưng thay vì văn bản màu xám cơ bản trên nền trắng, tôi muốn văn bản màu trắng trên nền xám. Tôi đã có thể chăm sóc nền màu xám, nhưng tôi dường như không thể thay đổi màu giữ chỗ hoặc màu văn bản đầu vào.

Một hành động nhỏ JSFiddle.

Dưới đây là đoạn mã HTML của tôi:

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

Đây là CSS Tôi cố gắng, các công trình thay đổi màu nền, nhưng không phải là giữ chỗ hoặc văn bản.

#Email, #Fname, #Message{ 
    background-color:#666; 
} 
#Email placeholder, #Fname placeholder, #Message placeholder{ 
    color:#FFF; 
} 
#Fname text{ 
    color:#FFF; 
} 

Answer 1

Tôi nghĩ rằng đây là CSS bạn đang tìm kiếm:

input, textarea{ 
    background-color:#666; 
    color: #FFF; 
} 

Nếu bạn muốn làm cho văn bản giữ chỗ một màu khác hơn #fff bạn có thể sử dụng CSS sau đây và cập nhật màu:

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

Dưới đây là một ngã ba của bạn jsFiddle

Cảm ơn @Ben Felda cho th liên kết 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

Tôi biết câu hỏi là về cách đặt lớp so với mặc định Bootstrap css nhưng đối với những biên dịch Bootstrap từ nguồn mà bạn có thể làm điều này bằng cách thay đổi một vài biến trong file bootstrap/variables.less dưới //== 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;