如何在火狐，歌剧，野生动物园下增加单选按钮的大小

how to increase radio buttons size under Firefox,Opera,Safari

本文关键字：单选按钮 增加 动物园 火狐 歌剧      更新时间：2023-09-26

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

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

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

仅在IE和Chrome，其他主要浏览器（FF，Opera，Safari）下工作不想增加默认单选按钮大小:(

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

谢谢

这是一个小提琴

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

你试过这个吗？

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

请记住，这将缩放按钮而不影响其周围的布局，即周围的任何内容都不会因此而移动，因此请使用适当的边距、填充等。

相关文章：