设置单选按钮动画的问题

我想使用这个Codepen的单选按钮，我复制粘贴了一些代码，但当我单击每个单选按钮时，尽管我复制并粘贴了原始css，但还是会出现有线动画：

这是原始代码笔。

这是我的代码：

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap");
* {
font-family: "Nunito Sans", sans-serif;
}
.ab-form .ab-form-list {
list-style: none;
}
.ab-form .ab-form-list__item:nth-of-type(n + 2) {
margin-top: 10px;
}
.ab-form .ab-checkbox,
.ab-form .ab-radio {
position: absolute;
opacity: 0;
}
.ab-form .ab-checkbox + label,
.ab-form .ab-radio + label {
position: relative;
cursor: pointer;
padding: 0;
user-select: none;
font-size: 0.875rem;
text-transform: capitalize;
font-weight: 600;
color: #212121;
transition: color 0.15s ease;
}
.ab-form .ab-checkbox + label::before,
.ab-form .ab-radio + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #dddd;
transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.ab-form .ab-checkbox:hover + label::before,
.ab-form .ab-radio:hover + label::before {
background: #f5f5f5;
box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.ab-form .ab-checkbox:hover + label,
.ab-form .ab-radio:hover + label {
color: black;
}
.ab-form .ab-radio {
/* label end */
}
.ab-form .ab-radio + label {
padding-left: 32px;
}
.ab-form .ab-radio + label::before {
width: 22px;
height: 22px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border-width: 0;
border-style: solid;
border-color: #7579e7;
}
.ab-form .ab-radio:checked + label::before {
background: #ffffff;
border-color: #7579e7;
border-width: 7px;
transition: background 0.2s ease, border 0.3s ease-out;
}

<form class="ab-form">
<ul class="ab-form-list">
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="children">
<label for="children">children</label>
</li>
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="teen">
<label for="teen">teen</label>
</li>
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="adult">
<label for="adult">adult</label>
</li>
</ul>
</form>

添加*, ::after, ::before {box-sizing: border-box;}以获取有关盒子尺寸的更多信息

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap");
* {
font-family: "Nunito Sans", sans-serif;
}
*, ::after, ::before {
box-sizing: border-box;
}
.ab-form .ab-form-list {
list-style: none;
}
.ab-form .ab-form-list__item:nth-of-type(n + 2) {
margin-top: 10px;
}
.ab-form .ab-checkbox,
.ab-form .ab-radio {
position: absolute;
opacity: 0;
}
.ab-form .ab-checkbox + label,
.ab-form .ab-radio + label {
position: relative;
cursor: pointer;
padding: 0;
user-select: none;
font-size: 0.875rem;
text-transform: capitalize;
font-weight: 600;
color: #212121;
transition: color 0.15s ease;
}
.ab-form .ab-checkbox + label::before,
.ab-form .ab-radio + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #dddd;
transition: background 0.2s ease, box-shadow 0.2s ease, border 0.1s ease-in;
}
.ab-form .ab-checkbox:hover + label::before,
.ab-form .ab-radio:hover + label::before {
background: #f5f5f5;
box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.ab-form .ab-checkbox:hover + label,
.ab-form .ab-radio:hover + label {
color: black;
}
.ab-form .ab-radio {
/* label end */
}
.ab-form .ab-radio + label {
padding-left: 32px;
}
.ab-form .ab-radio + label::before {
width: 22px;
height: 22px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border-width: 0;
border-style: solid;
border-color: #7579e7;
}
.ab-form .ab-radio:checked + label::before {
background: #ffffff;
border-color: #7579e7;
border-width: 7px;
transition: background 0.2s ease, border 0.3s ease-out;
}

<form class="ab-form">
<ul class="ab-form-list">
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="children">
<label for="children">children</label>
</li>
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="teen">
<label for="teen">teen</label>
</li>
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="adult">
<label for="adult">adult</label>
</li>
</ul>
</form>

完成！

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "Nunito Sans", sans-serif;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-transform: capitalize;
}
.radio {
font-size: 24px;
font-weight: 500;
text-transform: capitalize;
display: inline-block;
vertical-align: middle;
color: #333;
position: relative;
padding-left: 20px;
}
.radio + .radio {
margin-left: 20px;
}
.radio input[type="radio"]{
display: none;
}
.radio span {
height: 20px;
width: 20px;
border-radius: 50%;
border: 3px solid mediumblue;
display: block;
position: absolute;
left: 0;
top: 7px;
}
.radio span:after {
content: "";
height: 8px;
width: 8px;
border-radius: 50%;
border: 5px solid mediumblue;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(0);
border-radius: 50%;
transition: 300ms ease-out 0s;
}
.radio input[type="radio"]:checked ~ span:after {
transform: translate(-50%,-50%) scale(1);
}

<body>
<div class="radio-group">
<label class="radio">
<input type="radio" value="children" name="deep">
children
<span></span>
</label>
<label class="radio">
<input type="radio" value="Teen" name="deep">
Teen
<span></span>
</label>
<label class="radio">
<input type="radio" value="Adult" name="deep">
Adult
<span></span>
</label>
</div>

<form class="ab-form">
<label>
<input type="radio" name="age" />
children
</label>
<label>
<input type="radio" name="age" />
teen
</label>
<label>
<input type="radio" name="age" />
<span> adult </span>
</label>
</form>

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap");
* {
font-family: "Nunito Sans", sans-serif;
}
form {
display: flex;
flex-direction: column;
margin-left: 30px;
}
label {
text-transform: capitalize;
cursor: pointer;
}
input[type="radio"] {
position: relative;
/* opacity: 0; */
}
form input[type="radio"]:checked {
background-color: red;
}
input[type="radio"]::before {
content: "";
border-radius: 50%;
cursor: pointer;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background-color: #ddd;
transition: 0.3s;
box-sizing: border-box;
border: 0px solid #adb0ee;
}
input[type="radio"]:hover::before {
background-color: #eee;
box-shadow: 0 0 0px 3px #adb0ee;
}
input[type="radio"]:checked::before {
background-color: white;
box-shadow: 0 0 0px 0px #adb0ee, inset 0 0 0 4px #7579e7;
}
input[type="radio"]:hover:checked::before {
background-color: white;
box-shadow: 0 0 0px 3px #adb0ee, inset 0 0 0 4px #7579e7;
}

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap");
* {
font-family: "Nunito Sans", sans-serif;
}
.ab-form .ab-form-list {
list-style: none;
}
.ab-form .ab-form-list__item:nth-of-type(n + 2) {
margin-top: 10px;
}
.ab-form .ab-checkbox,
.ab-form .ab-radio {
position: absolute;
opacity: 0;
}
.ab-form .ab-checkbox + label,
.ab-form .ab-radio + label {
position: relative;
cursor: pointer;
padding: 0;
user-select: none;
font-size: 0.875rem;
text-transform: capitalize;
font-weight: 600;
color: #212121;
}
.ab-form .ab-checkbox + label::before,
.ab-form .ab-radio + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background: #dddd;
}
.ab-form .ab-checkbox:hover + label::before,
.ab-form .ab-radio:hover + label::before {
background: #f5f5f5;
box-shadow: 0 0 0 3px rgba(117, 121, 231, 0.4);
}
.ab-form .ab-checkbox:hover + label,
.ab-form .ab-radio:hover + label {
color: black;
}
.ab-form .ab-radio {
/* label end */
}
.ab-form .ab-radio + label {
padding-left: 32px;
}
.ab-form .ab-radio + label::before {
width: 22px;
height: 22px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border-width: 0;
border-style: solid;
border-color: #7579e7;
}
.ab-form .ab-radio:checked + label::before {
border-color: #7579e7;
border-width: 2px;
}

<form class="ab-form">
<ul class="ab-form-list">
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="children">
<label for="children">children</label>
</li>
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="teen">
<label for="teen">teen</label>
</li>
<li class="ab-form-list__item">
<input type="radio" name="age" class="ab-radio" id="adult">
<label for="adult">adult</label>
</li>
</ul>
</form>

相关内容

最新更新

热门标签：