我正在格式化html单选按钮。我想大致得到这样的内容(请忽略小字体和小字体)html - 定义单选按钮的大小,与屏幕分辨率无关-LMLPHP

我是通过设置每个按钮的宽度和高度css属性来实现的。例如这里:

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

当我以75%的缩放比例查看Chrome窗口时(这是此页面的默认设置),这是可行的,但是当我以100%的缩放比例查看时,单选按钮又变小了,并且大小相等。他们也失去了很酷的阴影-我想这与较差的分辨率有关。单选按钮的尺寸仍然存在:我的元素占用更多空间。但是单选按钮不会相应缩放。我不太了解发生了什么。

我尝试根据em定义单选按钮的大小,但这没有帮助。

例如,将三个不同的大小定义为1em,1.5em和3em会导致以下结果:

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

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

最佳答案

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

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>

关于html - 定义单选按钮的大小,与屏幕分辨率无关,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32841737/

10-12 12:40
查看更多