How to Change the Size of the Radio Button Using CSS

Increase the size of radio buttons

If you dont want to change the scale, you can use CSS to create custom styling (checkbox used as an example). The advantage is you then arent limited to the browser specific look and feel of the control.

Demo Fiddle

HTML

<input type='checkbox' />

CSS

input[type=checkbox]{
    position:relative;
    margin:5px;
}
input[type=checkbox]:before{
    position:absolute;
    height:30px;
    width:30px;
    top:-5px;
    left:-5px;
    border:2px solid grey;
    content:'';
    background:white;
    border-radius:100%;
}
input[type=checkbox]:after{
    position:absolute;
    display:none;
    height:15px;
    width:15px;
    top:5px;
    left:5px;
    content:'';
    background:grey;
    border-radius:100%;
}
input[type=checkbox]:checked:after{
    display:block;
}

Increase the size of checkbox/radio buttons on hover CSS

Something like this should work.

input[type=checkbox]:hover {
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
}

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="submit" value="Submit">
</form>

How can I make Radio Buttons and Check Boxes change size relative to the system resolution?

Alright I found an answer to my own question by using the utility created by this post
and changing it a little bit to fit my needs. Most all of my code was fine, but the selectors I was using didn't seem to work for these two. I'll put the two altered files below...

RadioButton

.radio-button {
    /*-fx-font-size: 1em;*/
}

.radio-button .radio  {
    -fx-background-insets: 0em;
    -fx-border-insets: 0em;
    -fx-border-radius: 1em;
    -fx-padding: 0.25em;
}

.radio-button .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.3em;
}

These were the only selectors needed for size changes. I had some of the other selectors for hover, focused, and such, but they were only for style with no size changes. The one big change was

.RadioButton -> .radio-button

CheckBox

.check-box {
    /*-fx-font-size: 1em;*/
}

.check-box .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.2em;
}

.check-box .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.4em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

Just like with RadioButton there were other selectors used for style, but not for sizing. All of the hover, focused, etc selectors will just default to the default values that I also used in the .box selector. The two -fx-padding tags affect the size of the mark and the box, and they were changed a little from my question. The main change though, just like RadioButton, was changing from

.CheckBox -> .check-box

I still don't really understand why this would cause any issue cause as long as the stylesheets are getting added correctly they should bothwork, but in my case the .check-box was the only one that functioned how I wanted.

Hopefully this helps anyone with similar issues!

change size of radio buttons

CSS allows for some manipulation of the form element - so you should be able to set it's height and width as with any element. However the OS and Browser still have an impact on the final output.

The code in this demo demonstrates CSS rules and how they are used to style the radio buttons:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/radio-button/

The easiest way to avoid using CSS - which is actually the more difficult way to accomplish this change - is to use javascript and css to replace the radio buttons and other form elements with custom images :
http://www.emblematiq.com/lab/niceforms/

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/