如何将单选按钮变成CSS按钮

如何使下面的单选按钮像按钮一样工作？

红宝石

<%= simple_form_for(@challenge) do |f| %>
  <%= f.text_field :action, placeholder: 'Enter a Custom Challenge' %>
  Or choose a featured challenge:
  <%= f.input :action, collection: ['Lose 10 Pounds', 'Exercise'], as: :radio_buttons %>
<% end %>

现在我让它看起来像一个按钮，但我无法让它工作。例如，当我单击该框时，背景不会变黄，并且收音机[输入]也不会被选中。

换句话说，我想要这个：

http://jsfiddle.net/YB8UW/654/

要像这样工作：

http://jsfiddle.net/YB8UW/8/

.CSS

.challenge_action {
     list-style-type:none;
     margin:25px 0 0 0;
     padding:0;
}
.challenge_action span {
     float:left;
     margin:0 5px 0 0;
    width:100px;
    height:40px;
    position:relative;
}
.challenge_action label, .challenge_action input {
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
.challenge_action input[type="radio"] {
    opacity:0.011;
    z-index:100;
}
.challenge_action input[type="radio"]:checked + label {
    background:yellow;
}

.challenge_action label {
     padding:5px;
     border:1px solid #CCC; 
     cursor:pointer;
    z-index:90;
}
.challenge_action label:hover {
     background:#DDD;
}

.HTML

<div class="form-group radio_buttons optional challenge_action">
  <span class="radio">
    <label for="challenge_action_lose_10_pounds">
      <input class="radio_buttons optional" type="radio" value="Lose 10 Pounds" name="challenge[action]" id="challenge_action_lose_10_pounds" />Lose 10 Pounds
    </label>
  </span>
  <span class="radio">
    <label for="challenge_action_exercise">
      <input class="radio_buttons optional" type="radio" value="Exercise" name="challenge[action]" id="challenge_action_exercise" />Exercise
    </label>
  </span>
</div>