I need to change my checkbox so that it is identical to the following image:
It should look like this when it is marked, when it is not marked, it removes the entire border and appears at the end.
I did not insert code because I could not get out of the basic, of course, the green border seems very simple, but what is difficult is the top right, where it has the symbol.
I need only the css code class.
You can do exactly the same as the example using the + (adjacent) and ::after selectors, and a bordered trick to create the triangles
.metro label {
display: block;
margin: 5px;
padding: 5px;
border: 1px solid transparent;
}
.metro input[type="checkbox"] {
display: none;
}
.metro input:checked + label {
border-color: green;
position: relative;
}
.metro input:checked + label::after {
content: '14';
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent;
border-right-color: green;
color: white;
font-size: 12px;
text-indent: 10px;
line-height: 13px;
}<div class="metro">
<input id="cb-1" type="checkbox" checked/>
<label for="cb-1">foo</label>
<input id="cb-2" type="checkbox"/>
<label for="cb-2">bar</label>
<input id="cb-3" type="checkbox"/>
<label for="cb-3">duas<br/>linhas</label>
</div>I leave here for another example that I have improved for this answer that for simplicity is only developed in HTML > and CSS .
<p>
<input id="active1" type="checkbox" class="check">
<label for="active1" class="check">Checked 1</label>
</p>
<p>
<input id="active2" type="checkbox" class="check">
<label for="active2" class="check">Checked 2</label>
</p>
body { width: 200px; margin: auto; padding-top: 50px;}
/* *** General appearance *** */
input.check { position: fixed; left:-100px;}
input.check + label[for].check {
cursor: pointer;
color: #999; font-weight: 700;
font-size: 20px; font-family: Arial;
border: 1px solid #CCC;
padding: 5px;
}
input.check + label[for].check:after {
content: "";
display: inline-block; width: 35px; height: 15px;
vertical-align: middle; text-align: right;
margin: 0 5px 0 10px;
line-height: 0.7em;
background: url(https://dl.dropbox.com/u/43753212/dev/webprojects/article/label-pointer.png) no-repeat;
background-position: left;
}
/* Checked */
input:checked + label[for].check:after {
color: #2ecc71;
content:"✔";
}
/* Focus */
input:focus + label[for].check {
border-color: #2ecc71;
}
/* Hover */
input + label[for].check:hover {
border-color: #2ecc71;
}
/* Hover (unchecked) */
input:not(:checked) + label[for].check:hover:after {
color: #DDD;
content:"✔";
}
/* Hover (checked) */
input:checked + label[for].check:hover:after {
color: #2ecc71;
content:"✔";
}
I need to change my checkbox so that it is identical to the following image:
Itshouldlooklikethiswhenitismarked,whenitisnotmarked,itremovestheentireborderandappearsattheend.
IdidnotinsertcodebecauseIcouldnotgetoutofthebasic,ofcourse,thegreenborderseemsverysimple,butwhatisdifficultisthetopright,whereithasthesymbol.
Ineedonlythecsscodeclass.
You can do exactly the same as the example using the %code% (adjacent) and %code% selectors, and a bordered trick to create the triangles
<ul>
<li>
<div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg"/></div><h4>StevenWilson</h4><inputid="check-1" type="checkbox"/>
<label for="check-1"><i class="fa fa-check"></i></label>
</li>
<li>
<div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg"/></div><h4>JamieHarden</h4><inputid="check-2" type="checkbox"/>
<label for="check-2"><i class="fa fa-check"></i></label>
</li>
<li>
<div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/cacique/128.jpg"/></div><h4>MikePortnoy</h4><inputid="check-3" type="checkbox"/>
<label for="check-3"><i class="fa fa-check"></i></label>
</li>
</ul>
body {
background: #607D8B;
}
* {
box-sizing: border-box;
}
ul {
border-radius: 2px;
overflow: hidden;
width: 360px;
margin: 60px auto 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
li {
width: 360px;
padding: 12px;
margin: auto;
position: relative;
overflow: hidden;
}
li.active h4 {
color: white;
}
li:before {
content: '';
width: 100%;
height: 100%;
display: block;
background: white;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
li .circle {
width: 40px;
height: 40px;
background: #ccc;
border-radius: 9999px;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
position: relative;
z-index: 10;
overflow: hidden;
}
li .circle img {
width: 100%;
}
li h4 {
display: inline-block;
font-family: "Roboto", Helvetica, sans-serif;
font-weight: 500;
font-size: 20px;
margin: 0;
vertical-align: middle;
position: relative;
z-index: 10;
transition: all .5s;
}
li input {
vertical-align: middle;
display: none;
}
li input + label {
display: inline-block;
background: #ccc;
width: 24px;
height: 24px;
border-radius: 2px;
position: absolute;
right: 20px;
top: 20px;
text-align: center;
padding-top: 3px;
color: transparent;
cursor: pointer;
transition: all .2s;
}
li input + label:after {
content: '';
background: rgba(3, 169, 244, 0.5);
width: 10px;
height: 10px;
position: absolute;
right: 8px;
top: 8px;
border-radius: 9999px;
transition: all 0.3s ease-in;
z-index: -1;
}
li input:checked + label {
background: white;
color: #03a9f4;
}
li input:checked + label:after {
width: 1000px;
height: 1000px;
top: -500px;
right: -500px;
background: #03a9f4;
}
I leave here for another example that I have improved for this answer that for simplicity is only developed in HTML > and CSS .
$('label').click(function() {
$(this).parent('li').toggleClass('active');
});
<ul>
<li>
<div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg"/></div><h4>StevenWilson</h4><inputid="check-1" type="checkbox"/>
<label for="check-1"><i class="fa fa-check"></i></label>
</li>
<li>
<div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg"/></div><h4>JamieHarden</h4><inputid="check-2" type="checkbox"/>
<label for="check-2"><i class="fa fa-check"></i></label>
</li>
<li>
<div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/cacique/128.jpg"/></div><h4>MikePortnoy</h4><inputid="check-3" type="checkbox"/>
<label for="check-3"><i class="fa fa-check"></i></label>
</li>
</ul>
I have an example in the CodePen and jsFiddle I consider close to show you if applicable.
body {
background: #607D8B;
}
* {
box-sizing: border-box;
}
ul {
border-radius: 2px;
overflow: hidden;
width: 360px;
margin: 60px auto 0;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
li {
width: 360px;
padding: 12px;
margin: auto;
position: relative;
overflow: hidden;
}
li.active h4 {
color: white;
}
li:before {
content: '';
width: 100%;
height: 100%;
display: block;
background: white;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
li .circle {
width: 40px;
height: 40px;
background: #ccc;
border-radius: 9999px;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
position: relative;
z-index: 10;
overflow: hidden;
}
li .circle img {
width: 100%;
}
li h4 {
display: inline-block;
font-family: "Roboto", Helvetica, sans-serif;
font-weight: 500;
font-size: 20px;
margin: 0;
vertical-align: middle;
position: relative;
z-index: 10;
transition: all .5s;
}
li input {
vertical-align: middle;
display: none;
}
li input + label {
display: inline-block;
background: #ccc;
width: 24px;
height: 24px;
border-radius: 2px;
position: absolute;
right: 20px;
top: 20px;
text-align: center;
padding-top: 3px;
color: transparent;
cursor: pointer;
transition: all .2s;
}
li input + label:after {
content: '';
background: rgba(3, 169, 244, 0.5);
width: 10px;
height: 10px;
position: absolute;
right: 8px;
top: 8px;
border-radius: 9999px;
transition: all 0.3s ease-in;
z-index: -1;
}
li input:checked + label {
background: white;
color: #03a9f4;
}
li input:checked + label:after {
width: 1000px;
height: 1000px;
top: -500px;
right: -500px;
background: #03a9f4;
}
$('label').click(function() {
$(this).parent('li').toggleClass('active');
});
I hope I have helped.