CSS

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

スポンサードリンク
スポンサードリンク

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;

        
}

スポンサードリンク

CSSの勉強をするのに最適なおすすめ書籍の紹介

created by Rinker
翔泳社
¥2,838 (2021/05/28 00:40:44時点 Amazon調べ-詳細)


WordPress運営が楽になるおすすめのサーバーをご紹介

WordPressおすすめのサーバー

スポンサードリンク

-CSS
-,

© 2021 さくらいらぼWEB版 /個人ブログ