Cambiare i colori dei moduli Bootstrap

Question

Ho un modulo semplice nel mio sito Bootstrap, ma invece del testo grigio di base su uno sfondo bianco, voglio il testo bianco su uno sfondo grigio. Sono stato in grado di occuparmi dello sfondo grigio, ma non riesco a cambiare il segnaposto o inserire il colore del testo.

Un po 'di azione JSFiddle.

Ecco il mio codice 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--> 

Ecco la CSS ho provato, le opere di cambiamento colore di sfondo, ma non il segnaposto o un testo.

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

Answer 1

Credo che questo sia il CSS che stai cercando:

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

Se si vuole rendere il testo luogo titolare di un colore diverso dal #FFF è possibile utilizzare il seguente CSS e aggiornare il colore:

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

Ecco una forchetta dei tuoi jsFiddle

Grazie @ Ben Felda per 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

So che il problema è su come piazzare le classi sopra il CSS di default Bootstrap ma per chi la compilazione dai sorgenti Bootstrap è possibile farlo modificando alcune variabili nel file bootstrap/variables.less soffietto //== 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;