jsp、<form:checkbox~で作成したinput要素に<label for~が効かない

現在、springフレームワークでできたソースに新しい画面をjspで追加しています。

不明点は表題の通りで
jspで記述したチェックボックスにlabel forで飾りつけを試みたのですが、反応しません。

記述したjsp

jsp
1<div class="check">
2  <form:checkbox path="hogehoge" value="hoge" id="no1"  />
3  <label for="no1"><p>タグ1</p></label>
4</div>

開発者ツールで見ると、自分が記述したチェックボックスタグの下に

html
1<div class="check">
2  <input id="no1" name="hogehoge" type="checkbox" value="hoge">
3  <input type="hidden" name="_hogehoge" value="on">
4  <label for="no1"><p>タグ1</p></label>
5</div>

謎のinputタグが１つ作成されており、邪魔されているようです。

ラジオボタンでは問題通り動いたので大丈夫かと思ったのですが、調べても原因がわかりません。

情報が不足しておりましたら随時追加させていただきますのでご助言お願いします。

※適応したいCSS

CSS
1　　　　　　 .check {
2                width: 30%;
3                margin: 2em auto;
4                padding: 1em;
5                text-align: left;
6                border: 1px solid #cccccc;
7            }
8
9            .check input {
10                display: none;
11            }
12
13            .check label {
14                position: relative;
15                display: inline-block;
16                padding: 15px 0;
17                margin-right: 30px;
18                padding-right: 35px;
19                cursor: pointer;
20            }
21
22            .check input[type='checkbox'] {
23                position: absolute;
24                visibility: hidden !important;
25            }
26
27            .check input[type='checkbox']+label:before,
28            .check input[type='checkbox']+label:after {
29                position: absolute;
30                top: 41%;
31                -webkit-box-sizing: border-box;
32                box-sizing: border-box;
33                margin-top: -7.5px;
34                content: '';
35            }
36
37            .check input[type='checkbox']+label:before {
38                right: 0;
39                width: 30px;
40                height: 15px;
41                border: 1px solid #e4e3e1;
42                border-radius: 15px;
43                background: #ffffff;
44            }
45
46            .check input[type='checkbox']+label:after {
47                right: 15px;
48                width: 15px;
49                height: 15px;
50                -webkit-transition: all 200ms ease-out;
51                transition: all 200ms ease-out;
52                border-radius: 50%;
53                background: #bdbdbd;
54            }
55
56            .check input[type='checkbox']:checked+label:after {
57                right: 0;
58                background: #3c8dbc;
59            }
60

macaron_xxx

2018/08/23 00:52

開発者ツールで見ているHTMLを動かしてみましたが、正常に動作しています。基本的にinputとlabelの間がどれだけ離れていても、idとforの関係は切り離されないです。他の部分が影響してそうですが…。

Satoshi.T

2018/08/23 01:58

返信ありがとうございます。やろうとしている装飾のcssがbefore,afterを使ったやや煩雑なものなのになっています。ラジオボタンの場合はjspでも問題なく動いたのですが、、。装飾のCSSを追加しました。ここでもないとすれば他のソースが邪魔しているのだと思います。お手数をおかけしますが、よろしくお願いします。

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

回答1件

ベストアンサー

inputとlabelが隣接兄弟(+)で指定されているので、CSSが適用されていないだけのようですね。
一般兄弟(~)で指定すればよさそうです。

CSS
1.check input[type='checkbox']~label:before,
2.check input[type='checkbox']~label:after {
3  position: absolute;
4  top: 41%;
5  -webkit-box-sizing: border-box;
6  box-sizing: border-box;
7  margin-top: -7.5px;
8  content: '';
9}
10
11.check input[type='checkbox']~label:before {
12  right: 0;
13  width: 30px;
14  height: 15px;
15  border: 1px solid #e4e3e1;
16  border-radius: 15px;
17  background: #ffffff;
18}
19
20.check input[type='checkbox']~label:after {
21  right: 15px;
22  width: 15px;
23  height: 15px;
24  -webkit-transition: all 200ms ease-out;
25  transition: all 200ms ease-out;
26  border-radius: 50%;
27  background: #bdbdbd;
28}
29
30.check input[type='checkbox']:checked~label:after {
31  right: 0;
32  background: #3c8dbc;
33}