时间戳

首页 > 解决方案 > 如何更好地设置复选框的样式？Toggleclass 不起作用，它似乎需要一个 id - 我怎样才能在检查之前使这个复选标记图标不可见

html - 如何更好地设置复选框的样式？Toggleclass 不起作用，它似乎需要一个 id - 我怎样才能在检查之前使这个复选标记图标不可见

问题描述

我正在尝试设置复选框的样式并实现了更改背景颜色的方法 - 见下文

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<style>
body,
html {
  font-family: "Lato", monospace;
  font-size: calc(1rem + 1vw);
}
.label__checkbox {
  display: none;
}
.label__checkbox i.icon {
  visibility: hidden;
  font-size: calc(9rem + 1vw);
  color: transparent;
}
.label__check {
  display: inline-block;
  border-radius: 3%;
  border: 2px solid rgba(0, 0, 0, 0.1);
  background: white;
  vertical-align: middle;
  margin-right: 20px;
  width: 10em;
  height: 2em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.label__check i.icon {
  opacity: 0.2;
  font-size: calc(9rem + 1vw);
  color: white;
}
.label__check:hover {
  border: 5px solid rgba(0, 0, 0, 0.2);
}
.label__checkbox:checked + .label__text .label__check {
  -webkit-animation: check 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
          animation: check 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22) forwards;
}
.label__checkbox:checked + .label__text .label__check .icon {
  opacity: 1;
  transform: scale(0);
  color: white;
  -webkit-text-stroke: 0;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@-webkit-keyframes check {
  100% {
    width: 10em;
    height: 2em;
    background: #00d478;
    border: 0;
    opacity: 1;
  }
}
@keyframes check {
  100% {
    width: 10em;
    height: 2em;
    background: #00d478;
    border: 0;
    opacity: 1;
  }
}
.normal {
  font-size: 15px;
  line-height: 20px;
  color: blueviolet;
}
.bigger {
  font-size: 25px;
  color: forestgreen;
}

</style>



<body>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <div class="center"> <label class="label">
         <input  class="label__checkbox" type="checkbox" />
         <span class="label__text">
           <span class="label__check">
             <i class="fa fa-check icon"></i>
           </span>
         </span>   </label>

</body>

</html>

我的问题是未选中该框时会显示复选标记图标。这给某些人（显然）造成了一些混乱。我一直在尝试使用 toggleclass 和 jquery 来用其他东西替换图像，但我无法让它工作。我也刚刚尝试使初始复选标记不可见，但由于某种原因，我试图隐藏可见性的尝试不起作用。有什么想法或想法吗？

谢谢你的时间。

标签： htmlcsscheckbox

解决方案

推荐阅读