如何更改引導複選框的顏色？

Question

我有以下的html代碼：

<div class="container"> 
    <form name="queryForm" class="form-inline text-center"> 
    <p class="checkbox-inline"> 
     <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'">Other</p> 
    </form> 
</div> 

和的結果是：

什麼改變這種顏色給定一個，例如D7B1D7的最簡單的方法是什麼？

Answer 1

我已經適應從這個CodePen的.squaredThree類的實例。如果你想看一個實例，我的答案底部有一個小提琴鏈接。

下面是更新後的CSS：

/* .squaredThree */ 
.squaredThree { 
    position: relative; 
    float:left; 
} 

.squaredThree label { 
    width: 20px; 
    height: 20px; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #D7B1D7; 
    border-radius: 4px; 
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4); 
} 

.squaredThree label:after { 
    content: ''; 
    width: 9px; 
    height: 5px; 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    border: 3px solid #fcfff4; 
    border-top: none; 
    border-right: none; 
    background: transparent; 
    opacity: 0; 
    -webkit-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.squaredThree label:hover::after { 
    opacity: 0.3; 
} 

.squaredThree input[type=checkbox] { 
    visibility: hidden; 
} 

.squaredThree input[type=checkbox]:checked + label:after { 
    opacity: 1; 
} 
/* end .squaredThree */ 

我已經更新了你的HTML包含另一個label，作爲原始label被用作僞複選框。這是你的更新HTML：

<div class="container"> 
    <form name="queryForm" class="form-inline"> 
    <div class="squaredThree"> 
     <input type="checkbox" name="optionsRadios" id="checkOther" value="other" ng-model="formData.other" ng-true-value="'other'" ng-init="formData.other='other'"> 
     <label for="checkOther"></label> 
    </div> 
    <label class="label-text">Other</label> 
    </form> 
</div> 

注意，附加label存在.squaredThreediv之外。該label有一類.label-text一些附加的樣式規則的文字稍微移動到checkbox權需要：

.label-text { 
    position: relative; 
    left: 10px; 
} 

最後，檢查在checkbox大小是不完全正確的，從而需要額外的規則來糾正：

*, 
::before, 
::after { 
    box-sizing: initial; 
} 

Fiddle Demo顯示上述行動。

Answer 2

input[type=checkbox]沒有background-color屬性。您可以使用其他方式來獲得您理想的結果：

1. 您可以使用複選框一個div內，然後根據自己的需要風格的股利。

   <div class="row"> 
       <input type="checkbox" /> 
   </div> 
   

2. 您可以使用僞元素這樣的：

   input[type=checkbox] { 
       cursor: pointer; 
       } 
   
   input[type=checkbox]:after { 
       content: " "; 
       background-color: #D7B1D7; 
       display: inline-block; 
       visibility: visible; 
   } 
   
   input[type=checkbox]:checked:after { 
       content: "\2714"; 
   }