[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法｜CSS擬似要素・擬似クラス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」チェックボックにチェックを入れることで、指定した要素の文字の色や幅(width の値）を変えたり、表示非表示を切替えたりする方法のご紹介です。 サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介させていただきます。 チェックボックスのデザイン変更 まず最初に、チェックボックスのデザインをボタンのイメージへと変更してみます。 CSS の記述例はこんな感じです。 input[type=checkbox] { position: absolute; left: -9999px; } label { display: block; width:200px; text-align:center; font-weight: bold; color: #fff; background: #e54040; border:1px solid #dd0000;
![[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法｜CSS擬似要素・擬似クラス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/1934f1693adca4bd770d83c0eb11ca9cfc036a2e/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2013%2F01%2Fcheckboxchecked.png)
http://diglog.org/javascript/943.html
