css美化input-checkbox多选框代码

利用css代码美化input-checkbox多选框样式，具体实现代码如下！点击查看input-checkbox多选框效果！​

html代码：

<div class="content">
  <div class="section">
    <label class="checkbox" for="agree1">
      <input type="checkbox" id="agree1">
      <span>选项样式一</span>
    </label>
  </div>
  <div class="section">
    <label class="input-checkbox">
      <input type="checkbox" class="agree2">
      <span class="agree-box"></span>
      <span>选项样式二</span>
    </label>
  </div>
</div>

css代码：

html,body,.content {
  height:100%;
}
:root {
  --bright-blue: rgb(0, 100, 255);
  --bright-green: rgb(0, 255, 0);
  --bright-red: rgb(255, 0, 0);
  --background: black;
  --foreground: white;
  --border-size: 2px;
  --border-radius: 0.75em;
}
body {
  background: var(--background);
  color: var(--foreground);
  min-height: 100dvh;
  display: grid;
  place-content: center;
  margin: 0;
  font-family: "Aspekta";
}
.content {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.section {
  width:300px;
  margin:5px;
  font-size:18px
}
.checkbox {
  position:relative;
  padding-left:1.5em;
  cursor:pointer
}
.checkbox input {
  display:none;
}
.checkbox span {
  display:inline-block;
  user-select:none;
}
.checkbox span::before,.checkbox span::after {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:1em;
  height:1em;
  border:1px solid #ccc;
  border-radius:3px;
  transition:200ms;
}
.checkbox span::before {
  width:1em;
  height:1em;
  border:1px solid #444;
}
.checkbox span::after {
  width:0.6em;
  height:0.6em;
  left:0.2em;
  background-color:#579ef8;
  border-color:#579ef8;
  opacity:0;
}
.checkbox input:checked ~ span::before {
  border-color:#579ef8;
}
.checkbox input:checked ~ span::after {
  opacity:1
}
.input-checkbox {
  position:relative;
  display:flex;
  align-items:center;
  cursor:pointer
}
.agree-box {
  margin-right:6px;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  background:#579ef8;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px #949aa4;
  transition:background 250ms ease,box-shadow 250ms ease;
  overflow:hidden;
}
.agree-box::before,.agree-box::after {
  content:'';
  position:absolute;
  left:8px;
  bottom:4px;
  width:0;
  height:2px;
  background-color:#fff;
  border-radius:3px;
  transform-origin:center left;
  transition:width 200ms ease;
}
.agree-box::before {
  transform:rotate(45deg);
  left:4px;
  bottom:9px;
  transition-delay:180ms
}
.agree-box::after {
  transform:rotate(-50deg);
  transition-delay:0ms
}
.input-checkbox:active .agree-box {
  box-shadow:inset 0 0 0 2px #596170
}
.agree2 {
  position:absolute;
  width:0;
  height:0;
  opacity:0;
  z-index:-1
}
.input-checkbox input:checked ~ .agree-box:before {
  width:7px;
  transition-delay:0ms
}
.input-checkbox input:checked ~ .agree-box::after {
  width:11px;
  transition-delay:180ms
}

以上是编程学习网小编为您介绍的“css美化input-checkbox多选框代码”的全面内容，想了解更多关于 前端知识 内容，请继续关注编程基础学习网。