Question

我想保留所有输入元素的默认浏览器外观我只想增加单选按钮的大小（没有jQuery，没有bg图像等）用简单的CSS。

我使用这个简单的CSS代码：

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

仅适用于IE和Chrome，其他主流浏览器（FF，Opera，Safari）不想增加默认的单选按钮大小：（

请帮助，我需要一个简单而干净的CSS跨浏览器解决方案（没有jQuery，没有隐藏的默认外观等）

谢谢，

Answer 1

你试过这个吗？

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

请记住，这会缩放按钮而不会影响它周围的布局，也就是说它周围没有任何东西会移动，因此请使用适当的边距，填充等。

Answer 2

这是 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;
}

html - 如何在Firefox，Opera，Safari下增加单选按钮的大小

2 个答案:

JSFiddle