Skip to main content
se añadieron 213 caracteres en el cuerpo
Origen Enlace
UselesssCat
  • 3.2k
  • 1
  • 21
  • 44

Quizá sea mas apropiado cambiar el estilo que emular la misma funcionalidad con otros controles. Esto es por que en un formulario los otros controles no se enviarían correctamente sin intervención de código Js.

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br><br>
  <button type="submit">Enviar</button>
</form>

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br><br>
  <button type="submit">Enviar</button>
</form>

Quizá sea mas apropiado cambiar el estilo que emular la misma funcionalidad con otros controles. Esto es por que en un formulario los otros controles no se enviarían correctamente sin intervención de código Js.

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br><br>
  <button type="submit">Enviar</button>
</form>

se eliminaron 8 caracteres en el cuerpo
Origen Enlace
UselesssCat
  • 3.2k
  • 1
  • 21
  • 44

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0 0 0 0px;5px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0 0 0 0px;5px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br><br><br>
  <button type="submit">Enviar</button>
</form>

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0 0 0 0px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0 0 0 0px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br>
  <button type="submit">Enviar</button>
</form>

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 5px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br><br>
  <button type="submit">Enviar</button>
</form>

Origen Enlace
UselesssCat
  • 3.2k
  • 1
  • 21
  • 44

Este es el ejemplo con checkboxes (que puedes encontrar originalmente en esta respuesta):

input[type=checkbox] {
  display: none;
}

input[type=checkbox]+label {
  background: #999;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0 0 0 0px;
}

input[type=checkbox]:checked+label {
  background: #0080FF;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0 0 0 0px;
}
<form>
  <input type='checkbox' name='thing1' value='valuable' id="thing1" /><label for="thing1">D</label>
  <input type='checkbox' name='thing2' value='valuable' id="thing2" /><label for="thing2">L</label>
  <input type='checkbox' name='thing3' value='valuable' id="thing3" /><label for="thing3">M</label>
  <input type='checkbox' name='thing4' value='valuable' id="thing4" /><label for="thing4">X</label>
  <input type='checkbox' name='thing5' value='valuable' id="thing5" /><label for="thing5">J</label>
  <input type='checkbox' name='thing6' value='valuable' id="thing6" /><label for="thing6">V</label>
  <input type='checkbox' name='thing7' value='valuable' id="thing7" /><label for="thing7">S</label>
  <br>
  <button type="submit">Enviar</button>
</form>