5

Preciso alterar meu checkbox para que fique idêntico ao da seguinte imagem:

inserir a descrição da imagem aqui

deve ficar assim quando esta marcado, quando não está marcado, retira toda a borda e figura no final.

Não inseri código pois não consegui sair do básico, claro, a borda verde me parece bem simples, porém o que dificulta é a parte superior direita, onde tem o símbolo.

Preciso apenas da classe código css.

2
  • 1
    você tem algum trecho de código em que você está trabalhando? 13/08/2015 às 17:37
  • 1
    @Sanção não, pois não consegui sair do inicial. Claro, colocar a borda verde me parece bem simples, o que torna difícil são a parte superior da direita. 13/08/2015 às 17:44

3 Respostas 3

7

É possível fazer exatamente igual ao exemplo utilizando os seletores + (adjacente) e ::after, e um truque com bordas para criar os triângulos

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

7
  • 1
    +1 muito engenhoso. 13/08/2015 às 19:16
  • 1
    Valeu pela resposta, 100%! 13/08/2015 às 19:19
  • é possível alterar o css para deixar dentro de uma caixa com barra de rolagem? pois eu faço isso limitando um height e a listagem ignora. tenho mais ou menos 300 checkboxes nesta lista, preciso colocar dentro de uma div que seja com barra de rolagem por motivos óbvios, mas o css que colocaste ignora a div e vai até em baixo na listagem. Com um select usando option ele fica legal, porém não posso por input e label dentro de tag option... 18/08/2015 às 13:32
  • 1
    @LuizNegrini talvez adicionar overflow-y: auto; e definir a altura máxima em .metro resolva 18/08/2015 às 14:46
  • 1
    você pode utilizar um <span> para aplicar um estilo diferente 18/08/2015 às 16:44
3

Exemplo 2

Deixo aqui outro exemplo que aprimorei para esta resposta que para simplificar está apenas desenvolvido em HTML e 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:"✔";
}
11
  • 1
    não estou conseguindo deixar exatamente como aquele... 13/08/2015 às 18:20
  • 1
    sim isso eu sei! hehehe, porém não é tão fácil como parece, eu não sei como desenhar o triangulo. 13/08/2015 às 18:33
  • 1
    @FranciscoMariaCalisto, evite postar mais de uma resposta, você pode editar e colocar as duas propostas de solução na mesma resposta 13/08/2015 às 18:37
  • 1
    @FranciscoMariaCalisto acredito que você sabe a resposta a exata mas não sei por que motivos não a posta hehe, desta forma, torna mais difícil o aprendizado, pois se você postar, eu ver notar de cara qual erro estou cometendo.... 13/08/2015 às 18:43
  • 1
    @FranciscoMariaCalisto a resposta dada nem eu quero, porém a dúvida é clara, já mensionei algumas vezes, não estou conseguindo desta vez, posicionar o triangulo na parte superior no canto direito... 13/08/2015 às 18:54
2

Exemplo 1

Tenho um exemplo no CodePen e no JSFiddle que considero próximo para lhe mostrar caso se aplique.

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

Espero ter ajudado.

2
  • 1
    muito bom, porém preciso que seja exatamente ou ao menos MUITO próximo daquele da imagem. Você não consegue me ajudar a alterar o que você postou? (que por sinal é muito bom também) 13/08/2015 às 17:54
  • Eu não posso nem devo "fazê-lo" por si, mas irei certamente ajuda-lo à medida que vai compreendendo o seu problema e a solução para o mesmo. 13/08/2015 às 18:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .