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

Share Improve this question Follow edited Apr 3, 2014 at 0:35 Jatin 3,08966 gold badges3030 silver badges4242 bronze badges asked Apr 3, 2014 at 0:22 noeh888noeh888 4111 gold badge33 silver badges66 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.