html - 独立于屏幕分辨率定义单选按钮大小

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>