我有一个自定义单选按钮,span
元素是按钮的边框,并且它有一个::after
,即填充按钮的点。我想将点集中在范围内,我正在为此使用flexbox,但是由于某些原因,如果我给::after
这个值:
width: 1.5rem;
height: 1.5rem;
它不起作用,它在右侧和底部有点。但是,如果我将两个属性的值都设为1.4rem
,则该值将完全位于中间。
这里是html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="checkbox" id="radio" />
<label for="radio"
>test
<span></span>
</label>
</body>
</html>
这里是CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
/* 1rem = 10px */
font-size: 62.5%;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
input[type='checkbox'] {
display: none;
}
input[type='checkbox'] + label {
cursor: pointer;
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
font-size: 1.6rem;
margin: 30px;
}
input[type='checkbox'] + label span {
margin-right: 8px;
background-color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50rem;
border: 0.4rem solid #2b90d9;
}
input[type='checkbox'] + label span::after {
content: '';
display: inline-block;
width: 1.5rem;
height: 1.5rem;
border-radius: 50rem;
background-color: #2b90d9;
opacity: 0;
}
input[type='checkbox']:checked + label span::after {
opacity: 1;
}
为什么会这样?
我认为您由于子像素渲染而遇到偏移。换句话说,您的视觉效果是如此之小,以至于它们无法整齐地放入可用的像素中。
您可以通过将当前值加倍来检验该理论。一切都很好。
input[type='checkbox'] + label span {
width: 6rem; /* formerly 3rem */
height: 6rem; /* formerly 3rem */
}
input[type='checkbox'] + label span::after {
width: 3rem; /* formerly 1.5rem */
height: 3rem; /* formerly 1.5rem */
}