부트 스트랩의 서식 색상 변경하기

Question

부트 스트랩 사이트에 간단한 양식이 있지만, 회색 바탕에 흰색 텍스트가 기본 회색 텍스트로 표시됩니다. 회색 배경을 처리 할 수 ​​있었지만 자리 표시자를 변경하거나 텍스트 색을 입력하는 것처럼 보이지 않습니다.

약간 작은 JSFiddle 동작.

다음

<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, 배경 색상 변경 작업,하지만 자리 표시 자 또는 텍스트는 다음과 같습니다

여기 내 HTML 마크 업입니다.

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

는 일에 대한 펠다 @ 벤 당신의 jsFiddle

감사의 포크입니다 전자 링크.

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;