如何設置窗體組背景顏色

我想在窗體組上設置背景顏色。爲了明確我的意思，請看下面的圖片 form group 正如你在上面看到的那樣，我用顏色標記了div，我想從form-group設置背景顏色。如何設置窗體組背景顏色

我試着用下面的CSS。

.signup-ctrl { 

    //margin-top: 60px; 

    .form-buffer { 
    margin: 30px 0px; 
    background-color: #006dcc; 

    } 
}

和HTML

<div class="col-md-5 portfolio-item"> 
    <form> 
     <div class="form-group form-buffer"> 
     <input type="text" class="form-control" name="name" placeholder="Enter your name"> 
     </div> 
     <div class="form-group form-buffer"> 
     <input type="email" class="form-control" name="email" placeholder="Enter your email"> 
     </div> 
     <div class="form-group form-buffer"> 
     <input type="email" class="form-control" name="emailconfirm" placeholder="Enter email confirmation"> 
     </div> 
     <div class="form-group form-buffer"> 
     <input type="password" class="form-control" name="password" placeholder="Enter your Password"> 
     </div> 
     <div class="form-group form-buffer"> 
     <input type="text" class="form-control" name="captcha" placeholder="Enter numbers from image"> 
     </div> 


     <button type="submit" class="btn btn-primary">Sign Up</button> 
    </form> 

    </div>

但它不工作，我做什麼錯？

來源

2015-02-08 zero_coding

你的CSS是不正確，應該是：

.portfolio-item form .form-buffer.form-group { 
margin: 30px 0px; 
background-color: #006dcc; 
}

這將選擇整個.form-group。你的錯誤是在另一個嵌套CSS規則。

Here is a fiddle of it

來源

2015-02-08 17:37:13

它不工作。此外，我使用引導主題雪人，這是原因，爲什麼不工作？ – 2015-02-08 17:57:01

也許你的CSS需要更具體。我編輯了我的答案。 – 2015-02-08 18:24:25

等待，你是說你想在實際的輸入框中使用背景色嗎？ – 2015-02-08 18:28:50

聽起來很奇怪.. !!但它不起作用，因爲您已在您選擇的form-group內應用padding-bottom: XXpx而不是僅應用background-color，然後它適用於您在padding-bottom中應用的長度。

來源

2015-12-08 15:50:53 startprogramming

您的.form-group佔據與其內部的input完全相同的高度，因此添加到其中的每個背景色實際上都隱藏在輸入後面。

您可以用填充代替上/下邊距，使.form-group面積實際上比input更大：

.form-group { 
    padding: 30px 0; 
    background-color: #006dcc; 
}

來源

2015-12-08 16:42:24 kremalicious

如何設置窗體組背景顏色

回答

相關問題