我只是想知道我是否得到了一个容器,容器内部有一个单选按钮,所以对于样式,我希望容器改变其背景颜色,每当我点击单选按钮。
<div className='team'>
<div className="team__first-row">
<svg>{image}</svg>
<input type="radio" name="Monitor" id="Monitor" />
</div>
<p className="team__name">{teamName}</p>
</div>
.team {
border: var(--basic-border-color);
width: 19em;
height: 7em;
border-radius: 1rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.team__first-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: .3rem .6rem;
margin-bottom: 2em;
}
input[type="radio"] {
appearance: none;
border-radius: 50%;
border: var(--basic-border-color);
width: 1.2rem;
height: 1.2rem;
cursor: pointer;
position: relative;
}
input[type="radio"]:focus {
border: none;
background: var(--container-bg);
}
input[type="radio"]::before {
content: "";
width: 0.2em;
height: 0.2em;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
}
input[type="radio"]:focus::after {
content: url(../imgs/vuesax/bulk/Vector.svg);
position: absolute;
top: .12em;
left: .3em;
}
enter image description here
我试着在父容器和输入之间使用选择器,但似乎缺少了一些东西!
1条答案
按热度按时间mrwjdhj31#
使用
:has
选择器:has()
伪类是CSS语言的最新成员,它允许选择父元素或兄弟元素。函数
:has()
CSS伪类表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时与至少一个元素匹配。此伪类提供了一种通过将相对选择器列表作为参数来选择父元素或相对于引用元素的上一个同级元素的方法。在下面的示例代码片段中,我使用
:has()
选择器来定位"任何具有input:checked
的.fruit
div"并更新其背景色。