ここから本文です

cssで、チェックボックスをONにしたとき背景色と文字色を変えたい コピペして使...

one********さん

2018/10/3120:24:36

cssで、チェックボックスをONにしたとき背景色と文字色を変えたい

コピペして使っているのでどう変えたらいいのかがよくわかりません。

チェックボックスにチェックが入っていたら背景色(文字色も)を変えたいです。
どのように修正したら追加できますか?

htmlは以下の感じです。
<input type="checkbox" name="001" value="あああ" id="001" >
<label for="001" class="checkbox">あああ</label>
<input type="checkbox" name="002" value="いいい" id="002">
<label for="002" class="checkbox">いいい</label>

cssは以下の感じです。
input[type=checkbox] {
display: none;
}
.checkbox {
box-sizing: border-box;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
position: relative;
display: inline-block;
margin: 0 5px 8px 0;
padding: 12px 12px 12px 42px;
border-radius: 8px;
background-color: #f6f7f8;
vertical-align: middle;
cursor: pointer;
width:200px;
}
.checkbox:hover {
background-color: #e2edd7;
}
.checkbox:hover:after {
border-color: #53b300;
}
.checkbox:after {
-webkit-transition: border-color 0.2s linear;
transition: border-color 0.2s linear;
position: absolute;
top: 50%;
left: 15px;
display: block;
margin-top: -10px;
width: 16px;
height: 16px;
border: 2px solid #bbb;
border-radius: 6px;
content: '';
}

.checkbox:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 50%;
left: 21px;
display: block;
margin-top: -7px;
width: 5px;
height: 9px;
border-right: 3px solid #53b300;
border-bottom: 3px solid #53b300;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
opacity: 1;
}

閲覧数:
274
回答数:
2
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

marvinさん

2018/11/108:43:54

CSSだけで作成したいなら下記の記述を追加してみて下さい。

input[type=checkbox]:checked + .checkbox{
background: red;
}

プラス記号は「後続する」という意味なので、チェックされたinputに後続する.checkboxという指定になっています。

質問した人からのコメント

2018/11/1 10:02:15

回答ありがとうございます!
助かりました!

ベストアンサー以外の回答

1〜1件/1件中

プロフィール画像

カテゴリマスター

yoy********さん

2018/10/3121:37:44

https://qiita.com/s0hno/items/fb31c8cf2a3e95124d3d

チェックすると文字色と背景色が変わるjavascriptです。

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる