I want to keep default browsers appearances for all input elements I want only increase the size of the radio buttons (no jQuery,no bg image,etc) only with simple CSS.

I use this simple CSS code:

.bigradio{ width: 2em; height: 2em;}

Which is working only under IE and Chrome, other major browsers (FF,Opera,Safari) don't want to increasing default radio button size :(

Please help, I need a simple and clean CSS cross browser solution (no jQuery, no hiding default appearance, etc)

Thanks,

I want to keep default browsers appearances for all input elements I want only increase the size of the radio buttons (no jQuery,no bg image,etc) only with simple CSS.

I use this simple CSS code:

.bigradio{ width: 2em; height: 2em;}

Which is working only under IE and Chrome, other major browsers (FF,Opera,Safari) don't want to increasing default radio button size :(

Please help, I need a simple and clean CSS cross browser solution (no jQuery, no hiding default appearance, etc)

Thanks,

• javascript
• html
• css
• cross-browser
• radio-button

• possible duplicate of How to change the size of the radio button using CSS? – random_user_name Commented Apr 3, 2014 at 0:23

2 Answers 2

Here's a FIDDLE

<input id="radio1" type="radio" name="radio"><label for="radio1" class="radio">Radio 1</label>
<input id="radio2" type="radio" name="radio"><label for="radio2" class="radio">Radio 2</label>
<input id="radio3" type="radio" name="radio"><label for="radio3" class="radio">Radio 3</label>

.radio {
  position: relative;
  float: left;
  clear: left;
  display: block;
  padding-left: 40px;
  margin-bottom: 12px;
  line-height: 22px;
  font-size: 18px;
  color: #666;
  cursor: pointer;
}
.radio:before {
  background: #fff;
  content: "";
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 22px;
  height: 21px;
  border: 1px solid #bbb;

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  box-shadow: inset 0 0 3px 0 #ccc;
  -moz-box-shadow: inset 0 0 3px 0 #ccc;
  -webkit-box-shadow: inset 0 0 3px 0 #ccc;
}
input[type="radio"] {
  display: none;
} 
input[type="radio"]:checked + label:before {
  content: "\2022";
  text-align: center;
  line-height: 15px;
  font-family: Tahoma; /* If you change font you must also change font-size & line-height */
  font-size: 44px;
  color: #00a0db;
  text-shadow: 0 0 4px #bbb;
}

Have you tried this?

input[type=radio] { 
transform: scale(3, 3); 
-moz-transform: scale(3, 3); 
-ms-transform: scale(3, 3); 
-webkit-transform: scale(3, 3); 
-o-transform: scale(3, 3); 
}

JSFiddle

Keep in mind that this will scale the button without affecting the layout around it, i.e. nothing around it will move because of it, so use appropriate margins, paddings, etc.