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

Answer 1

问题是您使用相同的伪元素作为方形边框和复选标记。简单的解决方案是继续对边框使用:before伪元素，然后使用:after伪元素作为复选标记。

Updated Example

您必须绝对将:after伪元素 relative 定位到父.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>

Answer 2

我之前的回答是错误的，因为它使用了::before pseudo-element selector on an element that isn't a container。感谢@BoltClock指出我的错误。所以，我提出了另一个使用Checkbox Hack和CSS3兄弟选择器（~）的解决方案。

在CodePen

Demo

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＆＃34;运行Code-Snippet＆＃34;功能因为它在我运行它时会做一些奇怪的事情。我认为这是因为复选框黑客攻击。

Answer 3

自定义复选框仅使用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

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>

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

4 个答案: