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](https://stackoverflow.com/a/3772914/6658955)): <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> 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; } <!-- language: lang-html --> <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> <!-- end snippet -->