checkboxのデザインを変更する
「input type="checkbox」で表示されるチェックボックスのデザインをCSSだけで変更する方法です。最近はbootstrapが充実しているので、大抵はそちらの部品を利用すれば十分だと思いますが、わざわざbootstrapを導入するほどでもない時に利用しています。
に変更します。
参考にした記事をメモしてなかったので、後でもう一度探すのに苦労しました。
目次
- コード
- AngularJSで状態を保持する場合
- 参考リンク
コード
HTML
<input type="checkbox" class="my_check" id="my_check_01"/>
<label for="my_check_01">こういうの</label>
CSS
input[type="checkbox"].my_check {
display: none;
}
input[type="checkbox"].my_check + label {
display: inline-block;
cursor: pointer;
margin: 0px;
}
input[type="checkbox"].my_check + label::before {
width: 30px;
height: 30px;
line-height: 26px;
font-size: 35px;
display: inline-block;
vertical-align: middle;
text-align: center;
content: "\2713";
color: transparent;
margin: 0;
padding: 0;
border-radius: 5px;
border: 3px solid #dddddd;
background: #f0f0f0;
-webkit-transition: .1s;
transition: .1s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type="checkbox"].my_check + label:hover{
color: #808080;
}
input[type="checkbox"].my_check + label:hover::before{
background-color: #fff;
}
input[type="checkbox"].my_check:checked + label{
color: #15c;
}
input[type="checkbox"].my_check:checked + label::before{
font-size: 25px;
background: #fff !important;
border-color: #15c !important;
color: #15c !important;
}
AngularJSで状態を保持する場合
上記のコードでcheckboxの状態が変更されたタイミングでAngularJSのモデルに反映する場合、「ng-click」は動作しなくなったので、そういった時は「ng-change」を使うと良さげです。
<input type="checkbox" class="my_check" id="my_check_01" ng-model="checkState" ng-change="alert('チェック状態が変更されました。');" />
<label for="my_check_01">こういうの</label>