javascript - 如何将单选按钮变成 CSS 按钮？

Question

如何使下面的单选按钮看起来像按钮？

ruby

<%= 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 %>

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

换句话说，我想要这个:

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>

Answer 1

只需使用 collection_radio_buttons 参见 here和 here详情

f.collection_radio_buttons :action, [['Lose 10 Pounds','Lose 10 Pounds'], ['Exercise','Exercise']], :first, :last