Skip to content

Instantly share code, notes, and snippets.

@andersdn
Created August 22, 2012 06:46
Show Gist options
  • Save andersdn/3423075 to your computer and use it in GitHub Desktop.
Save andersdn/3423075 to your computer and use it in GitHub Desktop.
Checkboxes created to look and behave like Android's new Holo UI. Pseudo checkbox created using data roles, with a "border triangle" added as required,
<div class="holoform dark">
<span class="checkbox">
<label for="check1">This is the label</label>
<span>
<input type="checkbox" name="check1" id="check1">
<label data-on="ON" data-off="OFF"></label>
</span>
</span>
<span class="checkbox">
<label for="check2">This one is already checked</label>
<span>
<input type="checkbox" name="check2" id="check2" checked="checked">
<label data-on="ON" data-off="OFF"></label>
</span>
</span>
</div>
body {
margin:0 0;
text-align:center;
background:#E8E8E8;
}
.holoform{
max-width:320px;
height:100%;
border:1px solid white;
padding:10px;
margin:0 auto;
background-color:#E8E8E8;
background-image:linear-gradient(#000000, #272D33);
}
.holoform .checkbox{
height:10px;
margin:10px 0;
padding:0px 0 20px;
display:block;
position:relative;
border-bottom:1px solid #333;
}
.holoform .checkbox label{
font-family:Roboto, "Droid Sans", Arial, Helvetica, sans-serif;
color:#fff;
font-size:14px;
line-height:20px;
cursor:pointer;
position:absolute;
left:0;
right:0;
color: white;
display: block;
float: left;
text-align: left;
}
.holoform .checkbox span{
display:inline-block;
position:relative;
float:right;
text-align:left;
width:70px;
height:20px;
background-color:#252525;
overflow:hidden;
}
.holoform .checkbox span input {
display:block;
position:absolute;
top:0; right:0; bottom:0; left:0;
width:100%;
height:100%;
margin:0 0;
cursor:pointer;
opacity:0;
filter:alpha(opacity=0);
z-index:5;
}
.holoform .checkbox span label {
background-color:#666;
display:inline-block;
width:35px;
text-align:center;
font:normal 10px/20px Arial,Sans-Serif;
color:#fff;
text-shadow:0 -1px 0 rgba(0,0,0,0.7);
margin:0px;
z-index:4;
position:absolute;
}
.holoform .checkbox span label:before {
content:attr(data-off);
}
.holoform .checkbox span input:checked + label {
margin-left:35px;
background-color:#3181aa;
z-index:3;
position:absolute;
color:white;
}
.holoform .checkbox span input:checked + label:before {
content:attr(data-on);
}
.holoform .checkbox span input + label:after{
position:absolute;
left:15px;
top:0px;
content:'';
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #666;
border-bottom:none;
z-index:-1;
}
.holoform .checkbox span input:checked + label:after{
left:-20px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top:none;
border-bottom: 20px solid #3181aa;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment