カスタムデザインのチェックボックスボタン

Question

通常のチェックボックスボタンのように見えないように、チェックボックスボタンをカスタムデザインしようとしています。イムは、次のことを達成しよう：

（とクロスマークはイメージですチェックに注意してください。）

アイブ氏はこれまでにこれを達成することができた：

を

しかし、私は小さなwhを取り除くことはできませんチェックボックスが表示されます。私は選択時にチェックボックスボタンのCSSを変更しようとしています。たとえば、yesがチェックされている場合は、境界線が緑に変わり、そうでない場合はグレーになります。

が可能ですか？

編集：

.btn-primary { 
 
    background-color: #f6f9fc; 
 
    border: 1px solid Rgba(61, 70, 77, 0.1); 
 
    font-size: 11px; 
 
    color: #3d464d; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<label class="btn btn-primary"> 
 
    <input type="checkbox" value="yes">yes 
 
</label> 
 

 
<label class="btn btn-primary"> 
 
    <input type="checkbox" value="no">no 
 
</label>

Answer 1

ちょうど遊んで、CSSだけで、何の画像ませんかJS：

input[type="checkbox"].myClass { 
 
    display: none; 
 
} 
 
input[type="checkbox"].myClass + label { 
 
    box-shadow: inset 0 0 0 1px silver; 
 
    border-radius: 0.25em; 
 
    display: inline-block; 
 
    font-family: sans-serif; 
 
    opacity: 0.5; 
 
    padding: 1em 1em 2em 1em; 
 
    text-align: center; 
 
    width: 10em; 
 
    -webkit-user-select: none; 
 
    user-select: none; 
 
} 
 
input[type="checkbox"].myClass + label:before { 
 
    background-image: linear-gradient(to left, black, black), linear-gradient(to left, black, black); 
 
    background-size: 2px 50%, 25% 2px; 
 
    background-repeat: no-repeat; 
 
    background-position: 0.75em 0.625em, 0.75em 0.625em; 
 
    border-radius: 50%; 
 
    box-shadow: inset 0 0 0 2px black; 
 
    content: ""; 
 
    display: block; 
 
    height: 2em; 
 
    margin: 1em auto; 
 
    transform: rotate(-135deg); 
 
    width: 2em; 
 
} 
 
input[type="checkbox"].myClass + label:after { 
 
    content: "Yes"; 
 
} 
 
input[type="checkbox"].myClass:checked + label { 
 
    box-shadow: inset 0 0 0 1px red, 0 0 0.25em 0 silver; 
 
    color: red; 
 
    opacity: 1; 
 
} 
 
input[type="checkbox"].myClass:checked + label:before { 
 
    background-image: linear-gradient(to left, red, red), linear-gradient(to left, red, red); 
 
    background-size: 2px 50%, 50% 2px; 
 
    background-repeat: no-repeat; 
 
    background-position: center center, center center; 
 
    box-shadow: inset 0 0 0 2px red; 
 
} 
 
input[type="checkbox"].myClass:checked + label:after { 
 
    content: "No"; 
 
}

<input class="myClass" id="o1" type="checkbox" /><label for="o1"></label> 
 

 
<input class="myClass" id="o2" type="checkbox" checked/><label for="o2"></label>