Пользовательский флажок с использованием только CSS и HTML

Ответ 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>

Ответ 2

Мой предыдущий ответ неверен, потому что он использует ::before псевдоэлементный элемент для элемента, который не является контейнером. Благодаря @BoltClock для указания моей ошибки. Итак, я придумал другое решение, в котором используется Checkbox Hack и селектор sibling 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 "Run Code-Snippet", потому что при запуске я делаю что-то странное. Я думаю, это из-за взлома checkbox.

Ответ 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: Демо

Ответ 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>