Customizing Radio Buttons from Simple Form

Question

So right now I'm using Simple Form with it's radio buttons in a field. Buttons are small for my UI and I want to customize them through css. How can I make buttons bigger? What should I add to .scss?

Here's a field in simple form containing radio buttons:

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

HTML output for each radio button is this one:

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

Possible duplicate of [How to change the size of the radio button using CSS?](http://stackoverflow.com/questions/4920281/how-to-change-the-size-of-the-radio-button-using-css) — Nil Llisterri, Jun 03 '16 at 15:23

score 1 · Accepted Answer · answered Jun 03 '16 at 15:23

I've never tried this. Let's take a look at css selectors: http://www.w3schools.com/css/css_attribute_selectors.asp

now, let's select all input type = "radio" and set the height and width:

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

Customizing Radio Buttons from Simple Form

1 Answers1