Metro style checkbox

Question

I need to change my checkbox to be identical to the following image:

should look like this when it is marked, when it is not marked, remove the whole edge and figure at the end.

I did not enter code because I could not get out of the basic, of course, the green border seems to me very simple, but what makes it difficult is the upper right, where has the symbol.

I only need the css code class.

Answer 1

It is possible to do exactly the same as the example using the selectors + (adjacent) and ::after, and a trick with edges 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: '\2714';
  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>

Answer 2

Example 2

I leave here another example that I enhanced for this answer that to simplify is only developed in HTML and CSS.

HTML

<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>

CSS

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:"✔";
}

Answer 3

Example 1

I have an example in Codepen and in the Jsfiddle which I consider to be close to show you if it applies.

HTML

<ul>
  <li>
    <div class="circle"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/boheme/128.jpg"/></div>
    <h4>Steven Wilson</h4>
    <input id="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>Jamie Harden</h4>
    <input id="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>Mike Portnoy</h4>
    <input id="check-3" type="checkbox"/>
    <label for="check-3"><i class="fa fa-check"></i></label>
  </li>
</ul>

CSS

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;
}

Javascript

$('label').click(function() {
  $(this).parent('li').toggleClass('active');
});

I hope I’ve helped.