Question

所以现在我在一个字段中使用Simple Form和它的单选按钮。我的UI按钮很小，我想通过CSS自定义它们。如何让按钮更大？我应该添加什么.scss？

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

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

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

＆＃13;

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

＆＃13;

Answer 1

我从未尝试过这个。我们来看看css选择器：http://www.w3schools.com/css/css_attribute_selectors.asp

现在，让我们选择所有输入类型=“radio”并设置高度和宽度：

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

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

1 个答案: