如何覆盖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; 
}