定义单选按钮大小,与屏幕分辨率无关

Question

我正在格式化html单选按钮.我希望得到或多或少的东西(请忽略小字体和对齐)

我通过设置每个按钮的宽度和高度css属性来完成此操作.比如这里的例子:

#r_starkeAblehnung.css-checkbox, #r_starkeZustimmung.css-checkbox {
border: 0px;
height: 50px; 
width: 50px;
}

当我以75%的缩放率查看我的Chrome窗口时这是有效的 - 这是我对此页面的默认设置 - 但是当我看到100%缩放时,单选按钮会回到所有小而且大小相同的位置.他们也失去了很酷的阴影 - 我想这与较差的分辨率有关.单选按钮尺寸仍然存在:我的元素占用更多空间.但单选按钮不会相应缩放.我不知道发生了什么.

我尝试用em来定义单选按钮大小,但它没有帮助.

例如,将三种不同的大小定义为1em,1.5em和3em会导致:

编辑:jsfiddle,在更改浏览器缩放时具有相同的行为

Answer 1

您应该考虑为单选按钮创建自己的外观/样式。像这样的东西：

input[type=radio] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 0 0 2px #FFF;
  border: 2px solid #CCC;
}
input[type=radio]:checked {
  background-color: #CCC;
}

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