disabledにしたチェックボックスのデザインを変更する方法

2021 2/16

2021/02/16

スポンサードリンク

disabledにしたチェックボックスのデザインを変更する方法

結論

・disbaledを適応させたときのチェックボックスのデザインはブラウザに依存するため背景色を変えたりチェックマークを変えたりすることは不可能。
・CSSの「appearance: none;」を使って　チェックボックス自体を見えなくしてから　before,after要素でチェックボックスのデザインを指定することは可能。
・「appearance: none;」が効かないIE11ではこの手法は使えない。

「appearance: none;」

appearanceプロパティはラジオボタンやポップアップメニューなどのユーザーインタフェースを指定するためのCSSで,
noneを指定することで消すことができる。

noneを指定してしまうとチェックボックスのチェックマークも消えるため、
なんどチェックボックスを押してもチェックマークが出てこない場合には、appearance: none;が意図しない場所で指定され初期化されている可能性はあり。

「:checked:disabled」とつなげて記述することで、
disabledがついたチェックされているcheckboxの指定が可能。




input[type=checkbox]:checked:disabled{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

}

「appearance: none;」で見えなくした要素はbeforeとafter要素を使ってデザインすることで
ラジオボタンやチェックボックスをブラウザデフォルト状態のときからオリジナルデザインへ変更することができる。
前述のとおり「appearance: none;」が効かないIE11ではこの手法は使えない。

あとは疑似要素にチェックボックスのコンテンツをいれて絶対配置で配置するとできあがり。




input[type=checkbox]:checked:disabled::after {

font-size: 20px;
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
content: '✓';
text-align: center;

        
}