I have the following mark-up using the bootstrap framework.
<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>
I would like to achieve the following:
Is there anyway to do this using CSS?
I would obviously need 3 states:
Initial:
.custom-container input[type=checkbox]{}
Some form of hover state:
.custom-container input[type=checkbox]:hover{}
When it is checked:
.custom-container input[type=checkbox]:checked{}
Can anyone suggest a solution?
This is a very simple example using a :before
pseudo element as well as :checked
and :hover
states.
<input type="checkbox" id="inputOne" />
<label for="inputOne"></label>
Note the matching for
and id
attributes, this attaches the label to the checkbox. Also, the order of elements is very important; the label must come after the input so we can style with input:checked
The checkbox is hidden with display: none
and all interaction is done with the label
The :after
pseudo element is given a unicode tick ( \\2714
) but this could also be ticked with a background image.
The jagged edge caused by the border-radius can be softened by a matching color box-shadow
. The inside edge of the border looks fine when the background image is not a solid block of color.
The transition: all 0.4s
creates a smooth fade in / out for the border.
I have added more guidance in CSS comments.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.