如何覆蓋BootStrap CSS複選框和輸入複選框

Question

我有一個問題覆蓋了複選框和輸入複選框的引導CSS。我有一個複選框列表，引導樣式超過了我自己的css文件。我檢查了一倍，並確保它不是bootstraps主題引起的問題，但它是引導CSS。

我也用我的CSS !important 嘗試，它仍然獲得超過纏身，我甚至把我的CSS文件中的引導程序的CSS後，試圖把我的CSS之前，甚至試圖

input[type=checkbox] 

和那也沒有做到。

這裏是我試圖使用覆蓋引導

.CheckBoxSubjects td { 
border-style: solid; 
border: 1px solid #78E389; 
width: 122px; 
height: 27px; 
border-radius: 5px; 
background-color:#78E389; 
} 

Answer 1

的CSS下面是我使用的代碼的小提琴。希望這對你有幫助。

http://jsfiddle.net/cLaty/

HTML

<div class="checkbox pull-right"> 
     <input type="checkbox" id="remember" /><label for="remember">Remember me</label> 
    </div> 

CSS

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { 
position: absolute; 
left: -9999px; 
} 
input[type="checkbox"]:not(:checked) + label, 
input[type="checkbox"]:checked + label { 
position: relative; 
padding-left: 25px; 
cursor: pointer; 
} 

/* checkbox aspect */ 
input[type="checkbox"]:not(:checked) + label:before, 
input[type="checkbox"]:checked + label:before { 
content: ''; 
position: absolute; 
left:0; top: 2px; 
width: 17px; height: 17px; 
border: 1px solid #aaa; 
background: #f8f8f8; 
border-radius: 3px; 
box-shadow: inset 0 1px 3px rgba(0,0,0,.3) 
} 
/* checked mark aspect */ 
input[type="checkbox"]:not(:checked) + label:after, 
input[type="checkbox"]:checked + label:after { 
content: '✔'; 
position: absolute; 
top: 0; left: 4px; 
font-size: 14px; 
color: #4cc0c1; 
transition: all .2s; 
-webkit-transition: all .2s; 
-moz-transition: all .2s; 
-ms-transition: all .2s; 
-o-transition: all .2s; 
} 
/* checked mark aspect changes */ 
input[type="checkbox"]:not(:checked) + label:after { 
opacity: 0; 
transform: scale(0); 
} 
input[type="checkbox"]:checked + label:after { 
opacity: 1; 
transform: scale(1); 
} 
/* disabled checkbox */ 
input[type="checkbox"]:disabled:not(:checked) + label:before, 
input[type="checkbox"]:disabled:checked + label:before { 
box-shadow: none; 
border-color: #999999; 
background-color: #ddd; 
} 
input[type="checkbox"]:disabled:checked + label:after { 
color: #999; 
} 
input[type="checkbox"]:disabled + label { 
color: #aaa; 
} 
/* accessibility */ 
input[type="checkbox"]:checked:focus + label:before, 
input[type="checkbox"]:not(:checked):focus + label:before { 
border: inherit; 
}