Zmiana kolorów formularzy Bootstrap

Question

Mam prosty formularz na stronie Bootstrap, ale zamiast podstawowego szarego tekstu na białym tle, chcę uzyskać biały tekst na szarym tle. Udało mi się zająć szarym tłem, ale nie mogę zmienić koloru zastępczego ani tekstu wejściowego.

Mała akcja JSFiddle.

Tu jest mój znaczników 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--> 

Oto CSS Próbowałem prace zmiana koloru tła, ale nie zastępczy lub tekst.

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

Answer 1

myślę, że to jest CSS szukasz:

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

Jeśli chcesz, aby tekst uchwytu miejsce koloru innego niż #FFF można użyć następującego CSS i aktualizowania kolor:

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

Oto widelec swoich jsFiddle

Dzięki @Ben Felda dla th e link.

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

Wiem, że pytanie jest o umieszczenie klas zamiast domyślnej Bootstrap css, ale dla tych kompilacji Bootstrap od źródła można to zrobić przez zmianę kilku zmiennych w pliku bootstrap/variables.less poniżej //== 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;