純粋なCSSファンシーチェックボックスの問題

純粋なCSSのチェックボックスを思いついています。私の目標を90％達成するのに成功しました。唯一の例外は、刺激的な標準的なチェクボックスが私の空想的なチェックボックスの下に現れることです。そして、私はそれを取り除くことはできません。どんな助け？純粋なCSSファンシーチェックボックスの問題

.checkboxFive { 
 
    width: 12px; 
 
    margin: 12px 100px; 
 
    position: relative; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 3px; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 

 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

出典

2017-03-06 Edgar Navasardyan

positionとcoordonatesで画面から削除できます。

.checkboxFive { 
 
    width: 12px; 
 
    margin: 12px 100px; 
 
    position: relative; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 3px; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 
#checkboxFiveInput { 
 
position:absolute; 
 
left:-9999px; 
 
} 
 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

出典

2017-03-06 21:14:41

はcheckboxFiveInputにdisplay:noneを追加します。

.checkboxFive { 
 
    width: 12px; 
 
    margin: 12px 100px; 
 
    position: relative; 
 
} 
 

 
.checkboxFive input { 
 
    display:none; 
 
} 
 

 
.checkboxFive label { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    width: 12px; 
 
    height: 12px; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
    border: 1px solid #ddd; 
 
} 
 

 
.checkboxFive label:after { 
 
    opacity: 0; 
 
    content: ''; 
 
    position: absolute; 
 
    width: 11px; 
 
    height: 4px; 
 
    background: transparent; 
 
    top: 1px; 
 
    left: 3px; 
 
    border: 2px solid #333; 
 
    border-top: none; 
 
    border-right: none; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.checkboxFive label:hover::after { 
 
    opacity: 0.5; 
 
} 
 

 
.checkboxFive input[type=checkbox]:checked + label:after { 
 
    opacity: 1; 
 
}

<div class="checkboxFive"> 
 
    <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> 
 
    <label for="checkboxFiveInput"></label> 
 
</div>

出典

2017-03-06 21:07:29 Namoz

ファンタスティック（displayまたはvisibilityは、アクセシビリティの問題になる可能性があります）。 @Namoz、もう1つの質問（話題外）。どのようにしてティックの色を変えますか？ –

.checkbox5ラベルで：次の行を変更した後：border：3px solid blue; 青はティックの色ですが、ヘキサ値を使用することができます。 – Namoz

カスタム]チェックボックスを作成するための最初のステップは、あなたのinput要素にvisibility: hiddenを追加することです。あなたのケースでは、あなたのCSSは次のようになります。

.checkboxFive #checkboxFiveInput { 
    visibility: hidden; 
}

カスタムチェックボックスの構築の詳細については、このlinkを見ることができます。

出典

2017-03-06 21:11:59 jtmingus

純粋なCSSファンシーチェックボックスの問題

答えて

関連する問題