bootstrapフレームワークを使用して、次のマークアップを作成しました。
<div class="col-md-4">
<div class="custom-container">
<img class="center-block img-responsive img-circle invite-contact-trybe" src="{$img}" alt="Contact Image">
<input class="invite-contact-checkbox" type="checkbox">
</div>
</div>
私は以下を達成したいと思います:
CSSを使用してこれを行う方法はありますか?
私は明らかに3つの状態が必要です:
初期:
.custom-container input[type=checkbox]{}
何らかのホバー状態:
.custom-container input[type=checkbox]:hover{}
チェックすると:
.custom-container input[type=checkbox]:checked{}
誰かが解決策を提案できますか?
これは :before
疑似要素と :checked
および:hover
状態を使用する非常に簡単な例です。
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
一致するfor
およびid
属性に注意してください。これにより、ラベルがチェックボックスに添付されます。また、要素の順序も非常に重要です。 input:checked
でスタイルできるように、ラベルは入力の後に来る必要があります
チェックボックスはdisplay: none
で非表示になり、すべての操作はラベルで行われます
:after
疑似要素にはユニコードの目盛り(\2714
)が与えられますが、これは背景画像でチェックすることもできます。
Border-radiusによって引き起こされるギザギザのエッジは、一致する色box-shadow
によって柔らかくすることができます。背景画像が均一な色のブロックではない場合、境界線の内側の端はうまく見えます。
transition: all 0.4s
は、ボーダーのスムーズなフェードイン/フェードアウトを作成します。
CSSコメントにガイダンスを追加しました。
input[type=checkbox] {
display: none;
}
/*
- Style each label that is directly after the input
- position: relative; will ensure that any position: absolute children will position themselves in relation to it
*/
input[type=checkbox] + label {
position: relative;
background: url(http://i.stack.imgur.com/ocgp1.jpg) no-repeat;
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
transition: box-shadow 0.4s, border 0.4s;
border: solid 5px #FFF;
box-shadow: 0 0 1px #FFF;/* Soften the jagged Edge */
cursor: pointer;
}
/* Provide a border when hovered and when the checkbox before it is checked */
input[type=checkbox] + label:hover,
input[type=checkbox]:checked + label {
border: solid 5px #F00;
box-shadow: 0 0 1px #F00;
/* Soften the jagged Edge */
}
/*
- Create a pseudo element :after when checked and provide a tick
- Center the content
*/
input[type=checkbox]:checked + label:after {
content: '\2714';
/*content is required, though it can be empty - content: '';*/
height: 1em;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
color: #F00;
line-height: 1;
font-size: 18px;
text-align: center;
}
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>