仅使用CSS和HTML创建自定义复选框

Question

我需要使用仅有的HTML和CSS创建自定义复选框。到目前为止，我已经写了：

HTML/CSS：

.checkbox-custom {
  opacity: 0;
  position: absolute;
}
.checkbox-custom,
.checkbox-custom-label {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  padding: 2px;
  margin-right: 10px;
  text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 0px;
  margin: 0px 15px 5px 5px;
}

<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

checked 复选框应该是一个方框边框包围着的勾选标记，而不仅仅是一个勾选标记。 搜索答案时，我只发现了使用UTF-8字符或图像显示勾选标记的情况。 为了达到我想要的效果，我不能使用任何一种方法，只能使用纯CSS和HTML。有什么建议吗？

这里是codepen链接：http://codepen.io/alisontague/pen/EPXagW?editors=110

- alisontague

---

请查看此链接 https://dev59.com/Dm855IYBdhLWcg3wyniC#34389136 - Jinu Kurian

Answer 1

问题在于你同时使用了同一个伪元素来绘制正方形边框和勾号。简单的解决方法是继续使用 :before 伪元素来绘制边框，然后使用 :after 伪元素来绘制勾号。

示例更新

你需要对 :after 伪元素进行绝对定位，并将其相对于父级标签 .checkbox-custom 进行定位。

以下是更新后的代码：

.checkbox-custom {
  display: none;
}
.checkbox-custom-label {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin: 5px;
  cursor: pointer;
}
.checkbox-custom + .checkbox-custom-label:before {
  content: '';
  background: #fff;
  border-radius: 5px;
  border: 2px solid #ddd;
  display: inline-block;
  vertical-align: middle;
  width: 10px; height: 10px;
  padding: 2px; margin-right: 10px;
}
.checkbox-custom:checked + .checkbox-custom-label:after {
  content: "";
  padding: 2px;
  position: absolute;
  width: 1px;
  height: 5px;
  border: solid blue;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  top: 2px; left: 5px;
}

<h3>Checkboxes</h3>
<div>
  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
  <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
  <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
  <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>

- Josh Crozier

Answer 2

使用HTML和CSS创建自定义复选框，包括三种状态：选中、未选中和半选中或未选中（如果它用于一组复选框）。

<label class="checkboxcontainer"> one
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

.checkboxcontainer input {
  display: none;
}

.checkboxcontainer {
  display: inlin-block;
  padding-left: 30px;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.checkboxcontainer .checkmark {
  display: inlin-block;
  width: 25px;
  height: 25px;
  background: #eee;
  position: absolute;
  left: 0;
  top: 0;
}

.checkboxcontainer input:checked+.checkmark {
  background-color: #2196fc;
}

.checkboxcontainer input:checked+.checkmark:after {
  content: "";
  position: absolute;
  height: 4px;
  width: 9px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.checkboxcontainer input:indeterminate+.checkmark:after {
  content: "";
  position: absolute;
  height: 0px;
  width: 9px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  }

"

Jsfiddle: Demo

"

翻译为中文为：

"

{{链接1：Jsfiddle：演示}}

"

- Narottam Goyal

Answer 3

我的先前回答是错误的，因为它在不是容器的元素上使用了::before伪元素选择器。感谢@BoltClock指出我的错误。所以，我想出了另一种解决方案，它使用复选框 Hack和CSS3兄弟选择器（~）。

在CodePen上查看演示。

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
input[type=checkbox] ~ label::before {
  content: '\2713';
  display: inline-block;
  text-align: center;
  color: white;
  line-height: 1em;
  width: 1em;
  height: 1em;
  border: 1px inset silver;
  border-radius: 0.25em;
  margin: 0.25em;
}
input[type=checkbox]:checked ~ label::before {
  color: black;
}

<form name="checkbox-form" id="checkbox-form">
  <div>
    <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
    <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
  </div>
  <div>
    <input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
    <label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
  </div>
</form>

我没有使用StackOverflow的“运行代码片段”功能，因为当我运行它时会出现一些奇怪的问题。我认为这是由于复选框hack引起的。

- Vince

Answer 4

.checkbox-custom {
  position: relative;
}

.checkbox-custom input[type=checkbox] {
  display: none;
}

.checkbox-custom input[type=checkbox]~b {
  cursor: pointer;
  outline: 0;
  position: relative;
  display: inline-block;
  margin: 4px 1px 0;
  background-color: #ffffff;
  border: 2px solid #ad823a;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  line-height: 1;
  text-align: center;
  font-size: 20px;
  color: #ad823a;
}

.checkbox-custom input[type=checkbox]:checked~b:after {
  content: '\2713';
}

<div class="checkbox-custom">
  <label>
                <input type="checkbox">
                <b></b>
                <span>app 1</span>
            </label>
</div>
<div class="checkbox-custom">
  <label>
                <input type="checkbox">
                <b></b>
                <span>app 1</span>
            </label>
</div>

- Tariq Javed