<input type>のcheckboxに背景色を付けたい

上記のようにグレーのチェックボックスに色をつけようと、backgroundでカラーを指定したのですが、変わりませんでした。

ググってみて
下記設定もやってみましたが変わらず。。。

css
1input[type="checkbox"] {
2  background: #3d404e;
3  border: #7f83a2 1px solid;
4}
5

checkboxに背景色をつける場合は、どうすればいいのかご存知の方がいらっしゃれば教えていただけるととても助かります。

よろしくお願いします。

html
1
2<div class="contact__container3">
3<h3>手続について教えてください。</h3>
4<form id="form">
5
6<div class="contact__container3-inner">
7<label class="heading">どのような手続をご検討ですか？？</label>
8<label class="heading__inner">任意</label>
9</div>
10
11<div class="contact__container3-checkbox">
12<input type="checkbox" name="" class="checkbox" id="">
13<label class="checkbox-text">相続</label>
14</div>
15
16<div class="contact__container3-checkbox">
17<input type="checkbox" name="" class="checkbox" id="">
18<label class="checkbox-text">相続</label>
19</div>
20

css
1.contact__container3 h3 {
2  height: 59px;
3  font-size: 20px;
4  letter-spacing: 0.1em;
5  font-weight: normal;
6  line-height: 1;
7  padding-left: 160px;
8  padding-top: 19px;
9  color: #fff;
10  background: #04B1B7;
11}
12
13.contact__container3-inner {
14  display: flex;
15  align-items: center;
16  background: #F0F1F1;
17  height: 70px;
18}
19
20.contact__container3-checkbox {
21  display: flex;
22  height: 17px;
23  line-height: 17px;
24  margin: 11px 0;
25}
26
27.checkbox {
28  width: 17px;
29  height: 17px;
30  background: #F0F1F1;
31  border: 1px solid;
32  color: #A3A3A3;
33}
34
35.checkbox-text {
36  font-size: 16px;
37  letter-spacing: 0.1em;
38  padding-left: 10px;
39}
40
41input[type="checkbox"] {
42  background: #3d404e;
43  border: #7f83a2 1px solid;
44}

行動規範の内容に同意します

回答1件

ベストアンサー

チェックボックスのスタイル適用はあきらめて、
オリジナルなチェックボックスを作ってしまうというのは如何でしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        /* 本来のチェックボックスは非表示 */
10        input[type=checkbox] {
11            display: none;
12        }
13
14        /* チェックボックスをオリジナルにデザイン */
15        /* ベース */
16        .checkbox01 {
17            box-sizing: border-box;
18            cursor: pointer;
19            display: inline-block;
20            padding: 5px 30px;
21            position: relative;
22            width: auto;
23        }
24
25        /* チェックボックスの箱の部分のデザイン */
26        .checkbox01::before {
27            background: rgb(219, 214, 214);
28            border: 1px solid #231815;
29            content: '';
30            display: block;
31            height: 16px;
32            left: 5px;
33            margin-top: -8px;
34            position: absolute;
35            top: 50%;
36            width: 16px;
37        }
38
39        /* チェックボックスのチェックの部分のデザイン */
40        .checkbox01::after {
41            border-right: 3px solid #000000;
42            border-bottom: 3px solid #000000;
43            content: '';
44            display: block;
45            height: 9px;
46            left: 10px;
47            margin-top: -7px;
48            opacity: 0;
49            position: absolute;
50            top: 50%;
51            transform: rotate(45deg);
52            width: 5px;
53        }
54
55        /* チェックのON-OFF */
56        input[type=checkbox]:checked + .checkbox01::after {
57            opacity: 1;
58        }
59    </style>
60</head>
61<body>
62    <form name="f">
63        <input type="checkbox" id="01-A" name="cb1" checked="checked">
64        <label for="01-A" class="checkbox01">相続</label>
65        <input type="checkbox" id="01-B" name="cb2" checked="checked">
66        <label for="01-B" class="checkbox01">購入</label>
67    </form>
68</div>
69</body>
70</html>