我正在制作几个单选按钮来控制对象。默认情况下,每个都应处于模式 A 中。每个都在所需位置写入checked
,它们也位于单独的容器中,但只有顶部的设置了默认值。 HTML 和 CSS 之间可能存在一些冲突,如何解决?
按钮代码:
fieldset {
position: fixed;
display: flex;
justify-content: space-around;
border: 0;
text-align: center;
}
#oneSwitchBtn {
margin-top: 5%;
}
#twoSwitchBtn {
margin-top: 15%;
}
label {
display: inline-block;
position: relative;
width: 3rem;
padding-bottom: 2.5rem;
z-index: 2;
cursor: pointer;
font-family: 'Inter-bold';
color: #30d5c8;
}
label:first-of-type {
z-index: 1;
}
input {
position: absolute;
top: 0;
height: 100%;
width: 20%;
appearance: none;
background: none;
opacity: 0.000001;
}
/* focus styles ======*/
input:focus+label {
text-decoration: underline;
}
fieldset:focus-within label:first-of-type::before {
box-shadow: 0 0 0 2px white, 0 0 0 4px grey;
}
/* toggle background =========== */
label:first-of-type::before {
content: '';
position: absolute;
width: 8rem;
height: 2rem;
bottom: 0;
left: 0.5rem;
background-color: grey;
border-radius: 0.95rem;
}
/* toggle knob (thumb?) ========= */
label:last-of-type::after {
content: '';
position: absolute;
height: 1.5rem;
width: 1.5rem;
background-color: black;
border-radius: 50%;
bottom: 0.25rem;
right: 0.75rem;
transition: transform 0.3s ease;
}
input:first-of-type:checked~label:last-of-type::after {
transform: translateX(-6rem);
background-color: rgb(22, 192, 73);
}
input:nth-of-type(2):checked~label:last-of-type::after {
transform: translateX(-3rem);
background-color: rgb(70, 70, 70);
}
input:last-of-type:checked~label:last-of-type::after {
transform: translateX(0);
background-color: red;
}
/* end of toggle ================== */
<fieldset id="oneSwitchBtn">
<input name="state" value="on" id="none0" type="radio">
<label for="none0"> 0 </label>
<input name="state" value="auto" id="none01" type="radio" checked>
<label for="none01">A</label>
<input name="state" value="off" id="none02" type="radio">
<label for="none02"> 1 </label>
</fieldset>
<fieldset id="twoSwitchBtn">
<input name="state" value="on" id="none1" type="radio">
<label for="none1"> 0 </label>
<input name="state" value="auto" id="none2" type="radio" checked>
<label for="none2">A</label>
<input name="state" value="off" id="none3" type="radio">
<label for="none3"> 1 </label>
</fieldset>