Skip to content

Instantly share code, notes, and snippets.

@willywongi

willywongi/checkbox_personalizzate.html

Created February 24, 2010 16:14
Show Gist options
  • Save willywongi/313569 to your computer and use it in GitHub Desktop.
Save willywongi/313569 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
checkbox_personalizzate.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Checkbox personalizzate</title>
<style>
#custom_checkbox input[type=checkbox] { display: none; }
#custom_checkbox label { padding-left: 20px; background-position: 0px center;
background-repeat: no-repeat; cursor: pointer; }
label[for=lightbulb]
{ background-image: url(/f_icons/lightbulb_off.png); }
#custom_checkbox input#lightbulb:checked + label
{ background-image: url(/f_icons/lightbulb.png); }
label[for=connect]
{ background-image: url(/f_icons/disconnect.png); }
#custom_checkbox input#connect:checked + label
{ background-image: url(/f_icons/connect.png); }
label[for=lock]
{ background-image: url(/f_icons/lock_open.png); }
#custom_checkbox input#lock:checked + label
{ background-image: url(/f_icons/lock.png); }
label[for=starred]
{ background-image: url(/f_icons/bullet_white.png); }
#custom_checkbox input#starred:checked + label
{ background-image: url(/f_icons/star.png); }
</style>
</head>
<body>
<h1>Checkbox Personalizzate</h1>
<ul id='custom_checkbox'>
<li><input type='checkbox' id='lightbulb'><label for='lightbulb'>Acceso/Spento</label></li>
<li><input type='checkbox' id='connect'><label for='connect'>Connesso, sconnesso</label></li>
<li><input type='checkbox' id='lock'><label for='lock'>Bloccato, sbloccato</label></li>
<li><input type='checkbox' id='starred'><label for='starred'>Stellina!</label></li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment