チェックボックスにscssを適用したら動かなくなりました。

色々なサイトをみて回ったのですが、解決できなかったので質問させていただきます。

もともとrailsでチェックボックスを作っていて、そこにscssを適用させました。
するとチェックボックスがチェックできなくなってしまいました。

チェックできるように指定したいです????‍♀️

html
1<div class="form-group">
2        <span>タグ</span>
3        
4          <%= collection_check_boxes(:users,:tag_ids, Tag.all, :id, :name) do |tag| %>
5            <div class="form-check cp_ipcheck">
6              <%= tag.label class: 'form-check-label' do %>
7                <%= tag.check_box class: 'form-check-input' %>
8                <%= tag.text %>
9              <% end %>
10            </div>
11          <% end %>
12        
13    </div>

CSS
1.form-check {
2	width: 90%;
3	margin: 2em auto;
4	text-align: left;
5}
6.form-check .form-check-input[type='checkbox'] {
7	position: absolute;
8	z-index: -1;
9	opacity: 0;
10}
11.form-check .form-check-label {
12	position: relative;
13	display: inline-block;
14	margin-right: 30px;
15	padding-right: 10px;
16	padding-left: 35px;
17	cursor: pointer;
18}
19.form-check .form-check-label::before {
20	position: absolute;
21	z-index: -1;
22	top: 0;
23	left: 0;
24	display: block;
25	width: 24px;
26	height: 24px;
27	content: ' ';
28	border: 2px solid #da3c41;
29}
30.form-check .form-check-input[type='checkbox'] + .form-check-label::before {
31	border-radius: 4px;
32}
33.form-check .form-check-input[type='checkbox']:checked + .form-check-label {
34	padding-left: 10px;
35	color: #ffffff;
36}
37.form-check .form-check-input[type='checkbox']:checked + .form-check-label::before {
38	top: 0;
39	width: 100%;
40	height: 100%;
41	background: #da3c41;
42}
43/* Transition */
44.form-check .form-check-label, .form-check .form-check-label::before {
45	-webkit-transition: 0.25s all ease;
46	        transition: 0.25s all ease;
47}

HTML
1<div class="form-group">
2        <span>タグ</span>
3        
4          <input type="hidden" name="users[tag_ids][]" value="" />
5            <div class="form-check cp_ipcheck">
6              <label class="form-check-label" for="users_tag_ids_1">
7                <input class="form-check-input" type="checkbox" value="1" name="users[tag_ids][]" id="users_tag_ids_1" />
8                経営学
9</label>            </div>
10
11            <div class="form-check cp_ipcheck">
12              <label class="form-check-label" for="users_tag_ids_2">
13                <input class="form-check-input" type="checkbox" value="2" name="users[tag_ids][]" id="users_tag_ids_2" />
14                マーケティングチャネル
15</label>            </div>
16
17            <div class="form-check cp_ipcheck">
18              <label class="form-check-label" for="users_tag_ids_3">
19                <input class="form-check-input" type="checkbox" value="3" name="users[tag_ids][]" id="users_tag_ids_3" />
20                保険学
21</label>            </div>
22
23            <div class="form-check cp_ipcheck">
24              <label class="form-check-label" for="users_tag_ids_4">
25                <input class="form-check-input" type="checkbox" value="4" name="users[tag_ids][]" id="users_tag_ids_4" />
26                経済史
27</label>            </div>
28
29            <div class="form-check cp_ipcheck">
30              <label class="form-check-label" for="users_tag_ids_5">
31                <input class="form-check-input" type="checkbox" value="5" name="users[tag_ids][]" id="users_tag_ids_5" />
32                ミクロ経済学
33</label>            </div>
34
35            <div class="form-check cp_ipcheck">
36              <label class="form-check-label" for="users_tag_ids_6">
37                <input class="form-check-input" type="checkbox" value="6" name="users[tag_ids][]" id="users_tag_ids_6" />
38                マクロ経済学
39</label>            </div>
40
41            <div class="form-check cp_ipcheck">
42              <label class="form-check-label" for="users_tag_ids_7">
43                <input class="form-check-input" type="checkbox" value="7" name="users[tag_ids][]" id="users_tag_ids_7" />
44                インターン入門
45</label>            </div>
46
47            <div class="form-check cp_ipcheck">
48              <label class="form-check-label" for="users_tag_ids_8">
49                <input class="form-check-input" type="checkbox" value="8" name="users[tag_ids][]" id="users_tag_ids_8" />
50                健康科学
51</label>            </div>
52
53            <div class="form-check cp_ipcheck">
54              <label class="form-check-label" for="users_tag_ids_9">
55                <input class="form-check-input" type="checkbox" value="9" name="users[tag_ids][]" id="users_tag_ids_9" />
56                日本史概論
57</label>            </div>
58        
59    </div>
60

情報が足りないなどありましたらご指摘ください。
ご教授お願い致します。

miyabi_pudding

2019/05/30 00:49

何点か確認です。・チェックできない、というのは、画面には表示されてるが、クリックしても反応がない、ということで認識あっているか・Ruby on Railsで、コンパイルないし、表示された、実際のHTMLコードは掲示可能か、可能なら記載してほしい・JavaScriptで何か処理をしていないか。しているなら、そのコードの記載がほしい。どうか、上記のご確認をお願いします。

m.ts10806

2019/05/30 00:53

SCSS→CSSを提示できるのでしたら、View部分もブラウザに表示されたHTMLを提示いただいたほうが。

m.ts10806

2019/05/30 00:54

あ、既に同じ依頼かかってましたね。

ueda_kesuke

2019/05/30 00:55

ありがとうございます。１点目：クリックしても反応がないです。画面に表示はされています。２点目：ごめんなさい。勉強不足でなのですが、「実際のHTMLコード」とはどこの部分でしょうか？３点目：JavaScriptは使用していません。よろしくお願い致します。

ueda_kesuke

2019/05/30 01:00

これで大丈夫でしょうか？？

ueda_kesuke

2019/05/30 01:00

ごめんなさい。インデント合わせるべきでした。

miyabi_pudding

2019/05/30 03:42

いえ、大丈夫です。後ほど回答させていただきますが、この状態なら他の方からも回答つきやすいかと思います。

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

回答2件

ベストアンサー

cssを適用したチェックボックス風にみえるものはタダの四角ですね

たとえばチェックボックスの後ろの文字をspanで囲んで
こんな感じでどうでしょうか？
（チェックボックスに::beforeや::afterが使えないので工夫が必要）

css
1<style>
2.form-check {
3    width: 90%;
4    margin: 2em auto;
5    text-align: left;
6}
7.form-check .form-check-input[type='checkbox'] {
8    position: absolute;
9    z-index: -1;
10    opacity: 0;
11}
12.form-check .form-check-label {
13    position: relative;
14    display: inline-block;
15    margin-right: 30px;
16    padding-right: 10px;
17    padding-left: 35px;
18    cursor: pointer;
19}
20/*
21.form-check .form-check-label::before {
22    position: absolute;
23    z-index: -1;
24    top: 0;
25    left: 0;
26    display: block;
27    width: 24px;
28    height: 24px;
29    content: ' ';
30    border: 2px solid #da3c41;
31}
32*/
33.form-check-input+span::before {
34    position: absolute;
35    z-index: -1;
36    top: 0;
37    left: 0;
38    display: block;
39    width: 24px;
40    height: 24px;
41    content: ' ';
42    border: 2px solid #da3c41;
43}
44.form-check-input:checked+span::before {
45    width: 0px;
46    height: 0px;
47    content: '';
48    border: 14px solid #da3c41;
49}
50
51.form-check .form-check-input[type='checkbox'] + .form-check-label::before {
52    border-radius: 4px;
53}
54.form-check .form-check-input[type='checkbox']:checked + .form-check-label {
55    padding-left: 10px;
56    color: #ffffff;
57}
58.form-check .form-check-input[type='checkbox']:checked + .form-check-label::before {
59    top: 0;
60    width: 100%;
61    height: 100%;
62    background: #da3c41;
63}
64/* Transition */
65.form-check .form-check-label, .form-check .form-check-label::before {
66    -webkit-transition: 0.25s all ease;
67            transition: 0.25s all ease;
68}
69</style>
70<div class="form-group">
71        <span>タグ</span>
72
73          <input type="hidden" name="users[tag_ids][]" value="" />
74            <div class="form-check cp_ipcheck">
75              <label class="form-check-label" for="users_tag_ids_1">
76                <input class="form-check-input" type="checkbox" value="1" name="users[tag_ids][]" id="users_tag_ids_1" />
77                <span>経営学</span>
78</label>            </div>
79
80            <div class="form-check cp_ipcheck">
81              <label class="form-check-label" for="users_tag_ids_2">
82                <input class="form-check-input" type="checkbox" value="2" name="users[tag_ids][]" id="users_tag_ids_2" />
83                <span>マーケティングチャネル</span>
84</label>            </div>
85
86            <div class="form-check cp_ipcheck">
87              <label class="form-check-label" for="users_tag_ids_3">
88                <input class="form-check-input" type="checkbox" value="3" name="users[tag_ids][]" id="users_tag_ids_3" />
89                <span>保険学</span>
90</label>            </div>
91
92            <div class="form-check cp_ipcheck">
93              <label class="form-check-label" for="users_tag_ids_4">
94                <input class="form-check-input" type="checkbox" value="4" name="users[tag_ids][]" id="users_tag_ids_4" />
95                <span>経済史</span>
96</label>            </div>
97
98            <div class="form-check cp_ipcheck">
99              <label class="form-check-label" for="users_tag_ids_5">
100                <input class="form-check-input" type="checkbox" value="5" name="users[tag_ids][]" id="users_tag_ids_5" />
101                <span>ミクロ経済学</span>
102</label>            </div>
103
104            <div class="form-check cp_ipcheck">
105              <label class="form-check-label" for="users_tag_ids_6">
106                <input class="form-check-input" type="checkbox" value="6" name="users[tag_ids][]" id="users_tag_ids_6" />
107                <span>マクロ経済学</span>
108</label>            </div>
109
110            <div class="form-check cp_ipcheck">
111              <label class="form-check-label" for="users_tag_ids_7">
112                <input class="form-check-input" type="checkbox" value="7" name="users[tag_ids][]" id="users_tag_ids_7" />
113                <span>インターン入門</span>
114</label>            </div>
115
116            <div class="form-check cp_ipcheck">
117              <label class="form-check-label" for="users_tag_ids_8">
118                <input class="form-check-input" type="checkbox" value="8" name="users[tag_ids][]" id="users_tag_ids_8" />
119                <span>健康科学</span>
120</label>            </div>
121
122            <div class="form-check cp_ipcheck">
123              <label class="form-check-label" for="users_tag_ids_9">
124                <input class="form-check-input" type="checkbox" value="9" name="users[tag_ids][]" id="users_tag_ids_9" />
125                <span>日本史概論</span>
126</label>            </div>
127
128    </div>

投稿2019/05/30 04:27

編集2019/05/30 04:31

yambejp

総合スコア114843

ueda_kesuke

2019/05/30 06:41

ありがとうございます！！ご提案通り実装しました。spanタグで囲うという発想が出てこなかったので助かりました！

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

チェック自体はクリックによって反応しています。
ただし、::checked + の対象が、親要素のlabelになっているので、
状態変化後のCSSが効いてないという状態です。

なので、yambejpさんのおっしゃる通り、spanを挟むようにし、spanの:beforeで、四角を実装するようにするといいでしょう。
そうすれば、checked + spanでチェック後のスタイルのターゲットを指定できます。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="UTF-8">
5   <title>if</title>
6<style type="text/css">
7.form-check {
8    width: 90%;
9    margin: 2em auto;
10    text-align: left;
11}
12.form-check .form-check-input[type='checkbox'] {
13    position: absolute;
14    z-index: -1;
15    opacity: 0;
16}
17.form-check .form-check-label {
18    position: relative;
19    display: inline-block;
20    margin-right: 30px;
21    cursor: pointer;
22}
23.form-check .form-check-label > span {
24    position: relative;
25    padding-right: 10px;
26    padding-left: 35px;
27    display: inline-block;
28}
29.form-check .form-check-label > span::before {
30    position: absolute;
31    z-index: -1;
32    top: 0;
33    left: 0;
34    display: block;
35    width: 24px;
36    height: 24px;
37    content: '';
38    border: 2px solid #da3c41;
39}
40.form-check .form-check-input[type='checkbox'] + span::before {
41    border-radius: 4px;
42}
43.form-check .form-check-input[type='checkbox']:checked + span {
44    padding-left: 10px;
45    color: #ffffff;
46}
47.form-check .form-check-input[type='checkbox']:checked + span::before {
48    top: 0;
49    width: 100%;
50    height: 100%;
51    background: #da3c41;
52}
53/* Transition */
54.form-check .form-check-label, .form-check .form-check-label > span::before {
55    -webkit-transition: 0.25s all ease;
56            transition: 0.25s all ease;
57}
58
59</style>
60</head>
61<body>
62<div class="form-group">
63        <span>タグ</span>
64
65          <input type="hidden" name="users[tag_ids][]" value="" />
66            <div class="form-check cp_ipcheck">
67              <label class="form-check-label" for="users_tag_ids_1">
68                <input class="form-check-input" type="checkbox" value="1" name="users[tag_ids][]" id="users_tag_ids_1" />
69                <span>経営学</span>
70</label>            </div>
71
72<!-- 以下同じ構造（Railsで組まれてるなら、1箇所変更で全て同構造になる） -->
73
74</div>
75</body>
76</html>