红宝石

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

Answer 1

只需使用collection_radio_buttons，请参阅here和here了解详情

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

Answer 2

尝试将输入留在标签

之外

http://jsfiddle.net/45kpk81e/

<input class="radio_buttons optional" type="radio" value="Lose 10 Pounds" name="challenge[action]" id="challenge_action_lose_10_pounds" />
<label for="challenge_action_lose_10_pounds">Lose 10 Pounds</label>

如何使单选按钮进入CSS按钮？

红宝石

CSS

HTML

2 个答案: