Bootstrap - 如何格式化表單中的標籤顏色

Question

我是非常新的bootstrap，我使用的是bootstrap 3.如下圖所示，我需要標籤（？）「Name」，「Email Address」 ，「電話號碼」和「消息」爲白色而不是深灰色。

這裏是我的HTML：

<section class="success" id="contact"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2>Contact Me</h2> 
       <hr class="star-light"> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-8 col-lg-offset-2"> 
       <!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. --> 
       <!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. --> 
       <form name="sentMessage" id="contactForm" novalidate> 
        <div class="row control-group"> 
         <div class="form-group col-xs-12 floating-label-form-group controls"> 
          <label>Name</label> 
          <input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name."> 
          <p class="help-block text-default"></p> 
         </div> 
        </div> 
        <div class="row control-group"> 
         <div class="form-group col-xs-12 floating-label-form-group controls"> 
          <label>Email Address</label> 
          <input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address."> 
          <p class="help-block text-danger"></p> 
         </div> 
        </div> 
        <div class="row control-group"> 
         <div class="form-group col-xs-12 floating-label-form-group controls"> 
          <label>Phone Number</label> 
          <input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number."> 
          <p class="help-block text-danger"></p> 
         </div> 
        </div> 
        <div class="row control-group"> 
         <div class="form-group col-xs-12 floating-label-form-group controls"> 
          <label>Message</label> 
          <textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea> 
          <p class="help-block text-danger"></p> 
         </div> 
        </div> 
        <br> 
        <div id="success"></div> 
        <div class="row"> 
         <div class="form-group col-xs-12"> 
          <button type="submit" class="btn btn-success btn-lg">Send</button> 
         </div> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</section> 

我有一個自定義的CSS文件，但不知道CSS代碼，以使「名稱」，「電子郵件地址」，「電話號碼」和「消息」是白色的而不是灰色的。

.floating-label-form-group { 
    position: relative; 
    margin-bottom: 0; 
    padding-bottom: 0.5em; 
    border-bottom: 1px solid #eeeeee; 
} 
.floating-label-form-group input, 
.floating-label-form-group textarea { 
    z-index: 1; 
    position: relative; 
    padding-right: 0; 
    padding-left: 0; 
    border: none; 
    border-radius: 0; 
    font-size: 1.5em; 
    background: none; 
    box-shadow: none !important; 
    resize: none; 
} 
.floating-label-form-group label { 
    display: block; 
    z-index: 0; 
    position: relative; 
    top: 2em; 
    margin: 0; 
    font-size: 0.85em; 
    line-height: 1.764705882em; 
    vertical-align: middle; 
    vertical-align: baseline; 
    opacity: 0; 
    -webkit-transition: top 0.3s ease,opacity 0.3s ease; 
    -moz-transition: top 0.3s ease,opacity 0.3s ease; 
    -ms-transition: top 0.3s ease,opacity 0.3s ease; 
    transition: top 0.3s ease,opacity 0.3s ease; 
} 
.floating-label-form-group:not(:first-child) { 
    padding-left: 14px; 
    border-left: 1px solid #eeeeee; 
} 
.floating-label-form-group-with-value label { 
    top: 0; 
    opacity: 1; 
} 
.floating-label-form-group-with-focus label { 
    color: #18BC9C; 
} 

任何幫助將不勝感激。

乾杯，

Answer 1

這不是一個標籤，但輸入的佔位符

所以，這你需要通過css樣式佔位符：

.floating-label-form-group textarea::-webkit-input-placeholder, 
.floating-label-form-group input::-webkit-input-placeholder { color: #fff; } 
.floating-label-form-group textarea:-moz-placeholder , 
.floating-label-form-group input:-moz-placeholder { /* Firefox 18- */ color: #fff; } 
.floating-label-form-group textarea::-moz-placeholder, 
.floating-label-form-group input::-moz-placeholder { /* Firefox 19+ */ color: #fff; } 
.floating-label-form-group textarea:-ms-input-placeholder, 
.floating-label-form-group input:-ms-input-placeholder { color: #fff; } 

工作Fiddel：https://jsfiddle.net/DTcHh/27294/

Answer 2

你可以申請白顏色，如下標籤

form label{ 
    color: #fff; 
} 

看到這裏的工作fiddle

Answer 3

您需要更新佔位符文本的顏色，因爲這是正在顯示的內容。

鏈接到小提琴：https://jsfiddle.net/DTcHh/27309/

的CSS

/*This changes your placeholder text to white*/ 
.form-control::-webkit-input-placeholder { color: white; } 
.form-control:-moz-placeholder { color: white; } 
.form-control::-moz-placeholder { color: white; } 
.form-control:-ms-input-placeholder { color: white; } 

如果你確實想要一個標籤，你可以添加一個h3標籤.control-groupdiv內，然後瞄準它像這樣

/*This changes the h3 tag above your placeholder text*/ 
.control-group h3 { 
    color: #fff; 
} 

這會給你上面使用你的代碼的小提琴所顯示的結果。