从简单表单自定义单选按钮

Question

所以现在我在字段中使用带有单选按钮的简单表单。按钮对于我的 UI 来说很小，我想通过 css 自定义它们。我怎样才能使按钮更大？我应该添加什么到 .scss?

这是一个包含单选按钮的简单形式的字段：

<%= f.collection_radio_buttons :shirtsize, [['XXL'], ['XL'],  ['Large'] ,  ['Medium'], ['Small']], :first, :last %>

HTML 每个单选按钮的输出是这个：

<label for="user_shirtsize_large">
  <input type="radio" value="Large" name="user[shirtsize]" id="user_shirtsize_large">
  <label class="collection_radio_buttons" for="user_shirtsize_large">Large</label>
</label>

Answer 1

我从来没有试过这个。让我们来看看 css select 或者： http://www.w3schools.com/css/css_attribute_selectors.asp

现在，让我们 select 所有输入类型 = "radio" 并设置高度和宽度：

input[type="radio"] { //select all input type = "radio"
    height: 100px;  //change these to get correct size
    width: 100px;
}

从简单表单自定义单选按钮

Customizing Radio Buttons from Simple Form

javascript

css

forms

ruby-on-rails

simple-form