rails单选按钮引导样式

Question

我有一个看起来像这样的单选按钮：

代码：

= f.input :status, as: :radio_buttons, collection: ["Active", "Frozen", "Finished"]

我希望它为它添加一些样式：

怎么做？

Answer 1

加载boostrap

def round_end(self ,num):
    for x in self.game_buttons:
        x.config(relief=tk.SUNKEN, state=tk.DISABLED)
    self.rounds_played = self.rounds_played + 1
    self.rounds.configure(text=f"Rounds Played: {self.rounds_played}")
    self.round_winner = tk.Label()
    self.play_again = tk.Button(text="Play Again?", command=self.new_game)
    self.play_again.grid(row=6, column=1, columnspan=3)

    if num == 0:
        self.round_winner.config(text="It was a Tie!")
        self.update()

    elif num == 1:
        self.players.wins[0] += 1
        self.player_stats[0].config(text=f"{self.players.name[0]}\'s Wins: {self.players.wins[0]}")
        self.update()

    elif num == 2:
        self.round_winner.config(text=f"{self.players.name[1]} Wins!")
        self.players.wins[1] += 1
        self.player_stats[1].config(text=f"{self.players.name[1]}\'s Wins: {self.players.wins[1]}")
        self.update()

定义单选按钮选项

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

将所有选项显示为切换按钮

<% collection = [ { name: "Active", id: 1 }, 
                  { name: "Frozen", id: 2 }, 
                  { name: "Finished", id: 3 }
                ] %>

按下按钮时设置类

<div class="btn-group" data-toggle="buttons">
  <% collection.each do |status| %>
    <label class="btn btn-primary">
      <input type="radio" name="options" id="<%= status[:id] %>" autocomplete="off">
        <%= status[:name] %>
      </input>
    </label>
  <% end %>
</div>

Answer 2

我发现最简单的解决方案： 形式：

= f.collection_radio_buttons :status, [[1, "Qualification"] ,[2, "Active"] ,[3, "Frozen"] ,[4, "Finished"] ,[5, "Requalified"]], :first, :last

在样式表中：

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

label {
  ///color of borders
  border: 0.5px solid #DDD;
  border-radius:0px;
}

label:hover {
  cursor:pointer;
  background-color:red;
}

input[type="radio"]:checked + label {
  background-color: green;
}

给我们：