javascript - 自定义 HTML 中的单选按钮并删除可检查的圆圈
问题描述
我有一个问题,有没有办法自定义单选按钮并使用可检查卡而不是可检查圆圈?
我正在研究多项选择题,需要它来使问题视图更具吸引力。这是基本的无线电组。我想要的是只选择一张卡片而不是默认的检查按钮。
<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>
解决方案
你可以试试这个
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
.container:hover input ~ .checkmark {
background-color: #ccc;
}
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
background: white;
}
<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
推荐阅读
- c# - 接口和重载
- c# - 如何在 C# 中对两个 JSON 数组进行排序和比较?
- node.js - 带有ipc的Windows上的节点child_process.spawn错误文件描述符
- qt - 何时调用异步 QMenu::popup() 与同步 QMenu::exec()?
- python-3.x - tkinter 在绑定到 double_click 事件时出现意外行为 - 什么是双击?
- tensorflow - 卷积层过滤器在 Keras 中显示
- amazon-web-services - 使用 Hadoop s3a 从 spark 作业写入 s3 时,指定的加密方法不受支持错误
- c# - 更改 FolderBrowserDialog 的设计
- firebase - Firebase httpsCallable 与“允许未经身份验证”的云功能
- mysql - 当另一列类似于输入时,SQL 查询获取 country_name 和出现次数