javascript - html - how to increase radio buttons size under Firefox,Opera,Safari - Stack Overflow

admin管理员组

文章数量:1304154

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.

本文标签：