我正在格式化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,在更改浏览器缩放时具有相同的行为
最佳答案
您应该只考虑为单选按钮创建自己的外观/样式。像这样的东西:
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/