부트 스트랩에서 시각적으로 활성화 된 (체크 된) 토글 버튼을 어떻게 사용할 수 있습니까?

Question

Bootply

나는 체크 박스 그룹을 가지고 있는데, 하나 이상의 (또는 그 이상) 옵션을 점검하고 사용할 수 없도록하고 싶습니다.

내장 된 비주얼 스타일이 있습니까? 아니면 사용자 정의 CSS가 필요합니까? 이 작동하지 않는 것 :

<div class="btn-group" data-toggle="buttons"> 

    <label class="btn btn-primary disabled"> 
    <input class="form-control" name="beard" value="fluffy" disabled="" type="checkbox"> Fluffy 
    </label> 

    <label class="btn btn-primary disabled"> 
    <input class="form-control" name="beard" value="scraggly" disabled="" type="checkbox"> Scraggly 
    </label> 

    <label class="btn btn-primary active disabled"> 
    <input class="form-control" name="beard" value="pointy" disabled="" checked="" type="checkbox"> Pointy 
    </label> 

</div> 

은 기능적으로, 나는 마지막 옵션이 선택되어 가정,하지만 시각적으로는 전혀 다르게 장애인 옵션보다 더 나타납니다.

예, 버튼으로 스타일이 지정된 체크 박스를 찾고 있습니다 (부트 스트랩처럼). 추가 JS 사용을 피해야합니다.

Answer 1

.disabled을 가진 임의의 .btn 요소는 box-shadow이 우선하여 제거됩니다. 당신은 당신의 자신의 심플한 스타일을 추가하여 적용 할 수 있음을 변경할 수 있습니다

.btn.disabled.active{ 
    box-shadow: inset 0 3px 5px rgba(0,0,0,.275); 
} 

Bootply

변경 box-shadow 매개 변수를 필요에 맞게.