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

Question

■分からないこと
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;
}

Answer 1

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

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

Comments

[Komama]

動きました！
サンプルまでお送りいただきありがとうございました！