我正在设计一个单选按钮,但在检查时无法使点居中。我尝试使用绝对定位和网格显示将其居中,但没有成功。有人可以告诉我原因以及如何解决吗?
/*--------styling using absolute poistionning---------*/
input[type="radio"]#id2{
appearance: none;
position: relative;
border-radius: 50%;
height: 1.6rem;
width: 1.6rem;
cursor: pointer;
border:2px solid rgb(18, 141, 223);
}
input[type="radio"]#id2::after{
position: absolute;
transform: translate(0.1rem,0.1rem);
content:"";
opacity: 0;
border-radius: 50%;
height: 1.2rem;
width: 1.2rem;
font-size: 1.2rem;
line-height: 2rem;
cursor: pointer;
background: rgb(18, 141, 223);
}
input[type="radio"]#id2:checked::after{
opacity: 1;
transition: ease 450ms;
}
/*-----------------styling using grid----------*/
input[type="radio"]#id1 {
appearance: none;
display: grid;
place-items: center;
border-radius: 50%;
height: 1.6rem;
width: 1.6rem;
cursor: pointer;
border:2px solid rgb(18, 141, 223);
}
input[type="radio"]#id1::after{
content:"";
opacity: 0;
border-radius: 50%;
height: 1.2rem;
width: 1.2rem;
cursor: pointer;
background: rgb(18, 141, 223);
}
input[type="radio"]#id1:checked::after{
opacity: 1;
transition: ease 450ms;
}
<label for="id1">using grid layout</label><br>
<input type="radio" name="transport" id="id1">
<label for="id2">using absolute positionning</label><br>
<input type="radio" name="transport" id="id2">
两种方法我都试过了,都没有成功。
您的
1.2rem
转换为非标准 19.19px,浏览器很难尝试定位。尝试将点大小更改为 1.125rem
(18 像素),将单选大小更改为 1.625rem
(26 像素)。对于 position:absolute
,添加 top
和负 transform: translate()
/*--------styling using absolute poistionning---------*/
input[type="radio"]#id2{
appearance: none;
position: relative;
border-radius: 50%;
height: 1.625rem;
width: 1.625rem;
cursor: pointer;
border:2px solid rgb(18, 141, 223);
}
input[type="radio"]#id2::after{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content:"";
opacity: 0;
border-radius: 50%;
height: 1.125rem;
width: 1.125rem;
font-size: 1.125rem;
line-height: 2;
cursor: pointer;
background: rgb(18, 141, 223);
}
input[type="radio"]#id2:checked::after{
opacity: 1;
transition: ease 450ms;
}
/*-----------------styling using grid----------*/
input[type="radio"]#id1 {
appearance: none;
display: grid;
place-items: center;
border-radius: 50%;
height: 1.625rem;
width: 1.625rem;
cursor: pointer;
border:2px solid rgb(18, 141, 223);
}
input[type="radio"]#id1::after{
content:"";
opacity: 0;
border-radius: 50%;
height: 1.125rem;
width: 1.125rem;
cursor: pointer;
background: rgb(18, 141, 223);
}
input[type="radio"]#id1:checked::after{
opacity: 1;
transition: ease 450ms;
}
<label for="id1">using grid layout</label><br>
<input type="radio" name="transport" id="id1">
<label for="id2">using absolute positionning</label><br>
<input type="radio" name="transport" id="id2">