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

Question

htmlとCSSだけを使用してカスタムチェックボックスを作成する必要があります。これまでのところ私が持っている：

HTML/CSS：checkedチェックボックスがちょうどチェックマークの代わりに、その周りに囲ま広場とチェックマークする必要があります

.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>

。回答を検索すると、UTF-8文字または画像を使用してチェックマークが表示されるケースのみが見つかりました。私はこれらのいずれかを私が達成しようとしているものに使用することはできません。私はプレーンなCSSとHTMLしか使用できません。助言がありますか？

ここcodepen：http://codepen.io/alisontague/pen/EPXagW?editors=110

Answer 1

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

Updated Example

あなたは絶対に親.checkbox-custom label要素に:after擬似要素相対を配置する必要があります。それは::beforepseudo-element selector on an element that isn't a containerを使用しているため、私の前の答えが間違っている

.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

：ここ

が更新されたコードです。私のエラーを指摘するための@ BoltClockに感謝します。そこで、Checkbox 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のの「ファイル名を指定して実行コード・スニペット」機能を使用していなかったの

Demo。私はそれがチェックボックスのハックのためだと思う。