CODEWITHSUNDEEP
javascriptcssruby-on-railsformssimple-form
Marko I.
Marko I.

Reputation: 562

Customizing Radio Buttons from Simple Form

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>

Upvotes: 1

Views: 827

Answers (1)

Jon Crawford
Jon Crawford

Reputation: 193

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

Upvotes: 1

Related Questions