html - 使用 CSS 创建自定义复选框
问题描述
我有以下代码用于在 CSS 中创建自定义复选框。其中大部分是从 W3Schools 中引用的,并且效果非常好。
.checkbox-container {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 16px;
}
.checkbox-container input {
/* Hide the default */
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox-container .checkmark {
position: absolute;
height: 16px;
width: 16px;
top: 0;
left: 0;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.4rem;
}
.checkbox-container:hover input~.checkmark {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.3);
}
.checkbox-container input:checked~.checkmark {
background-color: #1890ff;
border-color: #1890ff;
}
.checkbox-container .checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked~.checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 5px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<div>
<label class="checkbox-container">
Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
现在的问题是,我想更改我的标记。事实上我想把它简化成这样:
<div class="checkbox-container">
<input type="checkbox" name="remember-checkbox">
<label for="remember-checkbox">Remember me</label>
</div>
但是,我似乎无法将 CSS 代码转换为使用新标记。我尝试将 转换.checkmark
为label:before
,但这似乎不起作用。此外,是否可以在没有<span>
元素的情况下显示复选标记?谢谢你的帮助。
解决方案
你可以像下面这样更新。不要忘记for
使用 ID 而不是名称
.checkbox-container {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: 16px;
}
.checkbox-container input {
/* Hide the default */
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkbox-container label {
cursor:pointer;
}
.checkbox-container label:before {
content:"";
position: absolute;
height: 16px;
width: 16px;
top: 0;
left: 0;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.4rem;
}
.checkbox-container:hover input~label:before {
background-color: #ffffff;
border-color: rgba(0, 0, 0, 0.3);
}
.checkbox-container input:checked~label:before {
background-color: #1890ff;
border-color: #1890ff;
}
.checkbox-container label:after{
content: "";
position: absolute;
display: none;
left: 6px;
top: 1.5px;
width: 4px;
height: 8px;
border: solid #ffffff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.checkbox-container input:checked~label:after {
display: block;
}
<div class="checkbox-container">
<input type="checkbox" id="remember-checkbox">
<label for="remember-checkbox">Remember me</label>
</div>
推荐阅读
- javascript - 将其移动到资源文件夹后在handsontable上出现404
- wordpress - 修改后的 Bncert 命令已使站点脱机
- react-native - 从具有根相对路径的资产文件夹导入图像,React Native Expo CLI 项目
- c++ - 用于开发基于文本的计算器的 C++ 程序,您可以在其中进行加法、减法、乘法和除法
- python - 合并字典中的值并重命名键
- typescript - VSCode调试:未捕获的ReferenceError:未定义要求
- wordpress - 搜索我的网站会打开一个广告页面,而不是我的网站主页
- swift - Kotlin“takeIf”语句在swift中等效吗?
- excel - 我的 VBA 更改文件夹名称不太正确,我错过了什么?
- reactjs - 如何在 useEffect 上多次运行 useEffect 和 setState