我将平台本地单选按钮替换为自定义控件，因为在使用：invalid伪类设置单选按钮和复选框的样式时遇到了问题。我-webkit-appearance: none;以https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/上描述的方式使用。另外，我将控件的大小减小到16px，就像Bootstrap中的自定义控件一样。不幸的是，如果在Windows屏幕设置中启用了缩放比例，则单选按钮的圆点不会在中心位置相等。如果您多次单击包含的按钮，则可以看到它。所选单选按钮内的点将相对于单选按钮移动。点应居中居中，但有时它向左或向右移动1个像素（或半个像素？）。如果没有缩放比例（缩放比例为100％），则不会发生此问题。点缩放比例为125％时，点将以4个按钮的点击周期移动。当缩放比例为150％时，点以2个按钮的单击周期移动。
这个问题是实际的，而不仅仅是理论上的，因为在一个小的单选按钮上，非常明显的是该点不在中间。
为什么将这个无线电点居中会出现此问题？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { font-family: Arial, sans-serif;
color: #222; }
</style>
</head>
<body>
<form id="form1" class="custom-toggles" style="margin-left: 0px;">
<input id="r1" type="radio" value="1" name="radio" checked>
<label for="r1">Radio1</label>
<input id="r2" type="radio" value="2" name="radio">
<label for="r2">Radio2</label>
<br><br>
<button type="button" id="btn1">Move right</button>
</form>
</body>
</html>
.custom-toggles {
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
input[type='radio'] {
-webkit-appearance: none; //don't use platform-native control
-moz-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
border: 1px solid #aaa;
background: white;
outline: none;
}
input[type='radio']:checked {
background: #07f;
border-color: #07f;
}
input[type='radio']:after { //a radio button inner dot
content: '';
display: block;
width: 14px; height: 14px;
border-radius: 50%;
transform: scale(.5);
background: white;
}
}
}
let i = 0;
btn1.addEventListener('click', () => { i++; form1.style.marginLeft = `${i}px`; })
您可以在计算机上或在此处运行代码：https : //codepen.io/iwis/pen/QWjrzvW
网络浏览器：Chrome，操作系统：Windows 10。
.custom-toggles {
position:relative
}
input[type='radio']:after {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
position: relative;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
您可以尝试一下，小一点更好。当您创建缩放比例为0.5的点时，将获得新的大小。从14到7对吗？例如，当您将浏览器缩放到示例的125％时，您的点也会缩放，并达到7 * 1.25 = 8.75 px。但是我们所有人都没有完美的屏幕可以显示8.75像素。Thay只能显示8或9。这就是为什么您看到“ bug”的原因
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句