html - 无法从输入中删除检查图标
问题描述
我创建了一个切换选择器,现在行为是正确的,但我有一点 UI 问题,我不知道它是什么。
我已经用红色圈出了我遇到的问题,这真的很小,但很烦人。我不想要那些check
图标。
这是代码:
const Switch =
<form className="switch-field">
<div className="switch-field-element">
<input
type="radio"
id="switch_left"
name="switchToggle"
value={TextContents.CreditsBundle}
onChange={this.toggleState}
checked={!this.state.toggle}
/>
<label htmlFor="switch_left">{TextContents.CreditsBundle}</label>
</div>
<div className="switch-field-element">
<input
type="radio"
id="switch_right"
name="switchToggle"
value={TextContents.SubscriptionsBundle}
onChange={this.toggleState}
checked={this.state.toggle}
/>
<label htmlFor="switch_right">{TextContents.SubscriptionsBundle}</label>
</div>
</form>
和相关的css
.switch-field {
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.switch-field-element {
position: relative;
height: 80px;
}
.switch-field-element:not(:first-of-type) {
margin-left: -60px;
}
.switch-field input {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
}
.switch-field label {
display: inline-block;
position: relative;
padding: 0px 80px;
background-color:#f4f7f8;
height: 50px;
line-height: 50px;
cursor: pointer;
transition: all .1s;
color: #dfdfdf;
user-select: none;
border-radius: 40px;
font-size: 20px;
font-weight: bold;
font-family: Source Sans Pro;
}
.switch-field label::after {
content: '';
display: block;
position: absolute;
width: 4px;
height: 8px;
border-bottom: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
.switch-field input:checked + label {
background-color: var(--village-color-blue);
border-color: var(--village-color-blue);
color: white;
z-index: 1;
box-shadow: 0px 15px 20px -2px rgba(black, .1);
}
.switch-field label:first-of-type {
padding-right: 80px;
}
.switch-field label:first-of-type::before {
right: 0;
top: 0;
}
.switch-field label:first-of-type::after {
right: 12px;
top: 9px;
}
.switch-field label:last-of-type {
padding-left: 80px;
}
.switch-field label:last-of-type::before {
left: 0;
top: 0;
}
.switch-field label:last-of-type::after {
left: 12px;
top: 9px;
}
知道如何删除这些小检查吗?谢谢
解决方案
您可以将可见性设置为单选按钮隐藏。
尝试这个:
input[type="radio"]:checked{
visibility:hidden;
}
推荐阅读
- javascript - 如何提高'for循环'在JS中集成一些对象的性能
- python - 将递归函数改写为尾递归函数
- android - Firebase android 性能 NoClassDefFoundError -> FirebasePerfUrlConnection
- r - 伯努利试验的模拟测试,用于增加 R 中的样本量
- python - 排除 Cerberus 1.3.2 中的问题
- flutter - Flutter - TimeOfDay 到 Firestore 时间戳,然后到 DateTime?
- android - exoplayer2 持续时间为-9223372036854775807,如何解决?
- python - 使用 MYSQL RAW SQL QUERY 在 Django 模板中获取和显示数据
- delphi - Indy10 Google Securetoken 总是 403
- json - 将 Json 值传递给 Laravel Blade