Here is a simple CSS code snippet that does the job:

input[type=radio] {
    border: 0px;
    width: 100%;
    height: 2em;
}

By setting the border to 0, users can adjust the size of the radio button as needed, and the browser will display it accordingly. For example, specifying a height of 2em will result in a button twice the line height. This technique also applies to checkboxes (input[type=checkbox]), although different browsers may render them differently.

This code has been tested successfully on IE8+, FF21+, Chrome29+ on Windows operating systems.

Although this question is old, there is now a straightforward solution that works across most browsers using CSS3. I have personally tested it in IE, Firefox, and Chrome.

input[type="radio"] {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
  transform: scale(1.5);
}

You can adjust the value of 1.5 to increase or decrease the size as needed. Keep in mind that an excessively high ratio may cause the radio button to appear blurry. The image below illustrates a ratio of 1.5.

https://i.sstatic.net/jM8Rt.png

https://i.sstatic.net/4aYFW.png

It's worth noting that Chrome uses vector-based radio buttons, making this solution ideal for sharp results at any size. However, Firefox relies on raster images for radio buttons, so larger sizes may appear blurry with this method.

To adjust the dimensions of a radio button, utilize CSS styling:

style="height:35px; width:35px;"

This code directly impacts the size of the radio button.

<input type="radio" name="choices" value="option" style="height:35px; width:35px; vertical-align: middle;">

If you're looking for a solution that works effectively, check out the following link: https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/radio

One approach is to utilize the appearance property, which can be set to none to adjust the size of radio buttons without making them appear blurry. This method also allows for additional effects like transitions.

Here's an example :

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
  outline: unset !important /* I added this one for Edge (chromium) support */
}

The only downside is that this method is not compatible with Internet Explorer at the moment.

Take a look at the GIF below to see what can be accomplished. The final result will display better in a real browser.

https://i.sstatic.net/Z6GmZ.gif

For a live demonstration, visit the plunker here: https://plnkr.co/plunk/1W3QXWPi7hdxZJuT

Styling form elements with CSS alone can be a challenging task, as they are often difficult or impossible to customize directly. To work around this limitation, consider the following approach:

1. Utilize JavaScript to hide the radio button element.
2. Use JavaScript to dynamically add and display HTML elements that can be styled according to your preferences.
3. Define CSS rules to create a selected state by applying a "selected" class to a specific element (e.g., span).
4. Implement JavaScript functionality to synchronize the radio button's state with clicks on the corresponding element and vice versa, including keyboard accessibility considerations. Achieving consistent behavior across different browsers may require some careful coding and testing. Below is an example snippet using jQuery to demonstrate this technique without adding extra spans for styling purposes:

JavaScript

var labels = $("ul.radioButtons).delegate("input", "keyup", function () { //keyboard use
        if (this.checked) {
            select($(this).parent());
        }
    }).find("label").on("click", function (event) { //mouse use
        select($(this));
    });

function select(el) {
    labels.removeClass("selected");
    el.addClass("selected");
}

HTML

<ul class="radioButtons">
    <li>
        <label for="employee1">
            employee1
            <input type="radio" id="employee1" name="employee" />
        </label>
    </li>
    <li>
        <label for="employee2">
            employee2
            <input type="radio" id="employee2" name="employee" />
        </label>
    </li>
</ul>

Adjusting the default widget size may not be effective on all browsers, so consider creating personalized radio buttons using JavaScript instead. One method involves hiding standard radio buttons and overlaying custom images on your webpage. By clicking on these images, the appearance of the buttons can change, indicating their selection status.

If you're interested in learning more about this topic, check out this resource: Styling Checkboxes and Radio Buttons with CSS and JavaScript.

Here is a possible solution. Initially, the radio buttons appeared to be twice as big as the labels.
(Refer to CSS and HTML code below)

---

Safari: 10.0.3

https://i.sstatic.net/P7O1u.png

---

Chrome: 56.0.2924.87

https://i.sstatic.net/Ns3yO.png

---

Firefox: 50.1.0

https://i.sstatic.net/Y0CR8.png

---

Internet Explorer: 9 (Blurriness not IE's fault, test conducted on netrenderer.com)

https://i.sstatic.net/4duT6.png

---

CSS:

.sortOptions > label {
    font-size:          8px;
}

.sortOptions > input[type=radio] {
    width:              10px;
    height:             10px;
}

HTML:

<div class="rightColumn">Answers
    <span class="sortOptions">
        <input type="radio" name="answerSortList" value="credate"/>
        <label for="credate">Creation</label>

        <input type="radio" name="answerSortList" value="lastact"/>
        <label for="lastact">Activity</label>

        <input type="radio" name="answerSortList" value="score"/>
        <label for="score">Score</label>

        <input type="radio" name="answerSortList" value="upvotes"/>
        <label for="upvotes">Up votes</label>

        <input type="radio" name="answerSortList" value="downvotes"/>
        <label for="downvotes">Down Votes</label>

        <input type="radio" name="answerSortList" value="accepted"/>
        <label for="downvotes">Accepted</label>

    </span>
</div>                

Although I am responding from a time ahead of the initial posting date of this question, I am confident that my advice will be valuable to any future readers: To adjust the size of the "radio" button using CSS, you can easily achieve this by applying the following styling properties in your CSS code:

input[type='radio'] {
  height: 20px;
  width: 20px;
  vertical-align: middle;
}

I have tested this code and it is compatible with all browsers:

(I have added inline styles for simplicity...)

<label style="font-size:16px;">
    <input style="height:1em; width:1em;" type="radio">
    <span>Button One</span>
</label>

When you adjust the font-size of the label, both the radio button and text will resize accordingly.

It is not possible to do this directly, at least as far as I know.

To achieve a similar effect as radio buttons, you can replace them with images. These images can be customized to function like radio buttons and be sized however you prefer.

An alternative option is to utilize the transform attribute, specifying the necessary scale value:

input[type=radio]{transform:scale(2);}

(Vue3) HTML:

<h2>Group By</h2>
<div class="radioButtons">
   <label><input type="radio" id="groupByDevice" 
      v-model="data.groupBy" value="device" />
      <span>Device Location</span>
   </label>
   <label><input type="radio" id="groupByLocation" 
      v-model="data.groupBy" value="location" />
      <span>Device Type</span></label>
   </div>
</div>

SASS:

$vw-viewport: 2400px;
@function toVw($vw-viewport, $value) {
   @return ($value / $vw-viewport) * 100vw;
}

label {
  font-size: toVw($vw-viewport, 16px);
  line-height: toVw($vw-viewport, 18px);
}

.radioButtons {
  > label {
    white-space: no-wrap;
    display: inline-block;
    height: toVw($vw-viewport, 22px);
    margin: 0 toVw($vw-viewport, 10px) toVw($vw-viewport, 5px) 0;

    > input[type=radio] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      border-radius: 50%;
      width: toVw($vw-viewport, 18px);
      height:toVw($vw-viewport, 18px);
      border: toVw($vw-viewport,2px) solid #747474;
      margin: 0;
      position: relative;
      top: toVw($vw-viewport, 2px);
      background: white;
  
      &::after {
        content: '';
        position: absolute;
        top: 12.5%;
        left: 12.5%;
        right: 12.5%;
        bottom: 12.5%;
        width: auto;
        height: auto;
        background: rgb(80, 95, 226);
        opacity: 0;
        border-radius: 50%;
        transition: 0.2s opacity linear;
      }

      &:checked {
        &::after {
          opacity: 1 !important;
          background: rgb(80, 95, 226) !important;
        }
      }
    }

    &:hover {
      cursor: pointer;
      > input[type=radio]::after {
        opacity: 1;
        background: #cfd1e2;
      }
    }

    > span {
      display: inline-block;
      position: relative;
      top: toVw($vw-viewport, -1px);
      padding-left: toVw($vw-viewport, 7px);
    }
  }
}

The design adjustment includes a hovering gray dot effect. The labels can stack or wrap based on available space horizontally. This layout adapts dynamically with the page size. Alternatively, directly specifying pixels without using the SASS function is another option. In this context, the use of !important is justified to override hover states when the radio button is checked.

https://i.sstatic.net/9rLFD.gif