Created
January 31, 2013 23:11
-
-
Save yourpalsonja/4687595 to your computer and use it in GitHub Desktop.
Topcoat Checkbox Tests
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Dual Label */ | |
.dual-label { | |
width: 70px; | |
display: inline-block; | |
} | |
.checkbox-image { | |
display: inline-block; | |
width: 35px; | |
height: 31px; | |
background: url("/../img/sprites.png") left -33px no-repeat; | |
vertical-align: middle; | |
font-size: 18px; | |
margin: 0 15px 2px 0; | |
} | |
input[type="checkbox"] + label { | |
display: inline-block; | |
overflow: hidden; | |
margin: 10px 0; | |
} | |
input[type="checkbox"]:checked + label .checkbox-image{ | |
background: url("/../img/sprites.png") left top no-repeat; | |
} | |
/* Float Right */ | |
.float-right { | |
width: 145px; | |
display: inline-block; | |
} | |
.checkbox-image { | |
display: inline-block; | |
width: 35px; | |
height: 31px; | |
background: url("/../img/sprites.png") left -33px no-repeat; | |
margin: 0 15px 2px 0; | |
float: right; | |
position: relative; | |
top: -5px; | |
} | |
input[type="checkbox"]:checked + label .checkbox-image{ | |
background: url("/../img/sprites.png") left top no-repeat; | |
} | |
/* Float Left */ | |
.checkbox-image { | |
display: inline-block; | |
width: 35px; | |
height: 31px; | |
background: url("/../img/sprites.png") left -33px no-repeat; | |
vertical-align: middle; | |
font-size: 18px; | |
margin: 0 15px 2px 0; | |
} | |
input[type="checkbox"] + label { | |
display: inline-block; | |
overflow: hidden; | |
margin: 10px 0; | |
} | |
input[type="checkbox"]:checked + label .checkbox-image{ | |
background: url("/../img/sprites.png") left top no-repeat; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- dual label --> | |
<p> | |
<label for="checkbox-1" class="dual-label">Everyone</label> | |
<input type="checkbox" id="checkbox-1" /> | |
<label for="checkbox-1"><i class="checkbox-image"></i></label> | |
<br/> | |
<label for="checkbox-1" class="dual-label">Short</label> | |
<input type="checkbox" id="checkbox-1" /> | |
<label for="checkbox-1"><i class="checkbox-image"></i></label> | |
</p> | |
<!-- :after label --> | |
<p> | |
<input type="checkbox" id="checkbox-3" /> | |
<label for="checkbox-3" class="after-label">Enemies</label> | |
<br /> | |
<input type="checkbox" id="checkbox-4" /> | |
<label for="checkbox-4" class="after-label">short</label> | |
</p> | |
<!-- float right --> | |
<p> | |
<input type="checkbox" id="checkbox-2" /> | |
<label class="float-right" for="checkbox-2">Enemies<i class="checkbox-image"></i></label> | |
<br /> | |
<input type="checkbox" id="checkbox-4" /> | |
<label class="float-right" for="checkbox-4">Enemies<i class="checkbox-image"></i></label> | |
</p> | |
<!-- lefthand side --> | |
<p> | |
<input type="checkbox" id="checkbox-2" /> | |
<label for="checkbox-2"><i class="checkbox-image"></i>Enemies</label> | |
<br /> | |
<input type="checkbox" id="checkbox-3" /> | |
<label for="checkbox-3"><i class="checkbox-image"></i>Short</label> | |
</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment