부트 스트랩 CSS 체크 박스를 오버라이드하고 체크 박스를 입력하는 방법

Question

체크 박스와 입력 체크 박스에서 부트 스트랩 CSS를 오버 라이딩하는 데 문제가 있습니다. 나는 체크 박스 목록을 가지고 있고 부트 스트랩 스타일링은 내 자신의 CSS 파일을 오버 라이딩하고있다. 나는 체크를 두 배로했고 문제를 일으키는 부트 스트랩 테마가 아니라 부트 스트랩 CSS인지 확인했습니다.

I 쟁이 오버, 심지어는 부트 스트랩의 CSS 후 내 CSS 파일을 배치 그 전에 내 CSS를 퍼팅 시도, 시도조차 또한 내 CSS에서 !important 를 사용하여 시도하고 여전히 얻을 수있다

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; 
}