I've made custom checkbox, here is what i've made so far, but what I need is something like this, where there is also text and one image (not icon/fa-fa icon) in the center of the checkbox. Did u know how to achieve it? Here is the code from snippet:
css:
div {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
display: block;
position: relative;
cursor: pointer;
height: 120px;
outline: 1px solid white;
width: 120px;
}
label:before {
background-color: red;
color: white;
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 1px;
left: 1px;
text-align: center;
line-height: 20px;
transition-duration: 0.4s;
}
label img {
height: 100%;
width: 100%;
}
:checked + label {
border-color: red;
}
:checked + label:before {
content: "✓";
background-color: red;
outline: 1px solid red;
z-index: 99;
}
:checked + label img {
z-index: -1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 95%;
width: 95%;
outline: 3px solid red;
}
html:
<div>
<div><input type="checkbox" id="cb1" />
<label for="cb1"><img src="http://lorempixel.com/103/103" /></label>
</div>
<div><input type="checkbox" id="cb2" />
<label for="cb2"><img src="http://lorempixel.com/102/102" /></label>
</div>
</div>
Thanks in advance for your help.
Aucun commentaire:
Enregistrer un commentaire