Rails CSSでviewのラジオボタンを装飾したらボタンが押せなくなった

■分からないこと
cssでviewのラジオボタンを装飾したらボタンが押せなくなってしまいました。
ボタンを押せるようにするにはどうすればいいでしょうか？
ラジオボタンは画像のようにボタン形式、背景色を変え、チェックをしたら色が変わるようにしています。

new.html.erb

<div class="form-group">
  <label for="constraction" class="font-weight-bold">工事の希望</label><br>
  <label class="radio"  value="true"><%= f.radio_button :work, "true" %>希望</label>
  <label class="radio"  value="false"><%= f.radio_button :work, "false" %>無し</label>
</div>

出力されたHTML

<div class="form-group">
  <label for="constraction" class="font-weight-bold">工事の希望</label><br>
  <label class="radio" value="true"><input type="radio" value="true" name="work" id="work_true">希望</label>
  <label class="radio" value="false"><input type="radio" value="false" name="work" id="work_false">無し</label>
</div>

CSS

input[type=radio] {
  display: none;
}

.radio {
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;
}
.radio:hover {
  background-color: #e2edd7;
}
.radio:hover:after {
  border-color: #53b300;
}
.radio: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: '';
}

.radio:before {
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  position: absolute;
  top: 50%;
  left: 20px;
  display: block;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #53b300;
  content: '';
  opacity: 0;
}

input[type=radio]:checked + .radio:before {
  opacity: 1;
}

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

回答1件

ベストアンサー

こう出力するようにしてみてください。（input要素をlabel要素の外に出してlabel要素にvalueではなくfor属性をつける）

HTML
1<div class="form-group">
2  <label for="constraction" class="font-weight-bold">工事の希望</label><br>
3  <input type="radio" value="true" name="work" id="work_true">
4  <label class="radio" for="work_true">希望</label>
5  <input type="radio" value="false" name="work" id="work_false">
6  <label class="radio" for="work_false">無し</label>
7</div>
8```**動くサンプル：**[https://jsfiddle.net/d9yfenr1/](https://jsfiddle.net/d9yfenr1/)