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,

index.html

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

style.css

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