純粋なセマンティックHTML / CSSソリューション
これは自分で実装するのが簡単で、既成のソリューションは必要ありません。また、CSSは簡単すぎるとは思えないため、多くのことを学ぶことができます。
これはあなたがする必要があることです:
チェックボックスには異なるid
属性が必要です。これにより<label>
、ラベルの- for
属性を使用して、に接続できます。
例:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
チェックボックスにラベルを付けると、ブラウザの動作がトリガーされます。誰かがラベル(またはラベル内の画像)をクリックすると、チェックボックスが切り替わります。
次に、たとえばチェックボックスを適用することにより、チェックボックスを非表示にしますdisplay: none;
。
あとは、label::before
疑似要素に必要なスタイルを設定するだけです(これは、視覚的なチェックボックスの置換要素として使用されます)。
label::before {
background-image: url(../path/to/unchecked.png);
}
最後のトリッキーなステップでは、CSSの:checked
疑似セレクターを使用して、チェックボックスがオンのときに画像を変更します。
:checked + label::before {
background-image: url(../path/to/checked.png);
}
+
(隣接兄弟セレクタ)あなたが唯一の直接マークアップに隠されたチェックボックスに従ってラベルを変更できます。
これを最適化するには、両方の画像をスプライトマップに入れ、画像background-position
を交換する代わりに変更のみを適用します。
もちろん、ラベルを正しく配置し、正しく適用display: block;
して設定する必要がwidth
ありheight
ます。
編集:
これらの手順の後に作成したコードペンの例とスニペットは同じ手法を使用していますが、チェックボックスに画像を使用する代わりに、チェックボックスの置換は純粋にCSSで行われ::before
、一度チェックされるとラベルにを作成しますcontent: "✓";
。いくつかの丸みを帯びた境界線と甘い遷移を追加すると、結果は本当に好感が持てます!
以下は、テクニックを紹介し、チェックボックスに画像を必要としない実用的なコードペンです。
http://codepen.io/anon/pen/wadwpx
以下は、スニペット内の同じコードです。
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>