web-dev-qa-db-ja.com

CSSとHTMLのみを使用するカスタムチェックボックス

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しか使用できません。助言がありますか？

ここにコードペン： http://codepen.io/alisontague/pen/EPXagW?editors=11

htmlcsscheckboxinputpseudo-element
14
alisontague

問題は、正方形の境界線とチェックマークに同じ擬似要素を使用していることです。簡単な解決策は、境界線に:before疑似要素を引き続き使用し、次にチェックマークに:after疑似要素を使用することです。

更新された例

: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>
15
Josh Crozier

HTMLとCSSのみを使用したカスタムチェックボックスと3つのチェックボックスの状態（チェックされている、チェックされていない、ハーフチェックされている、またはチェックされていない（チェックボックスのグループで使用されている場合））

<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：デモ

1
Narottam Goyal

::beforeコンテナーではない要素の疑似要素セレクター を使用しているため、私の以前の答えは間違っています。エラーを指摘してくれた@BoltClockに感謝します。それで、私は Checkbox Hack とCSS3兄弟セレクター（~）を使用する別のソリューションを考え出しました。

デモ at 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の「コードスニペットの実行」機能は、実行時に奇妙なことをするため使用しませんでした。チェックボックスのハックが原因だと思います。

1
Vince
.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>
0
Tariq Javed