I have a toggle that show or hide a div class. The status toggle is saved in local storage, so after page refresh the desired setting is maintained.
Now I'm trying to get another toggle that performs the same functions on a different class. I tried with a simple copy / paste changing the names of the classes and functions, but it doesn't work.
Can anyone give me a suggestion?
Fiddle: https://jsfiddle.net/snake93/s0rx4ube/9/
function save() {
var checkbox = document.getElementById("ck1");
localStorage.setItem("ck1", JSON.stringify(checkbox.checked));
}
function isChecked(isOn) {
if (isOn === true) {
$(".hideme").show();
} else {
$(".hideme").hide();
}
}
//for loading
var checked = JSON.parse(localStorage.getItem("ck1"));
document.getElementById("ck1").checked = checked;
console.log(checked);
$(document).ready(function(){
isChecked(checked)
$(".switch input").on("change", function(e) {
const isOn = e.currentTarget.checked;
console.log(isOn)
isChecked(isOn);
});
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*END OF TOGGLE SWITCH*/
.hideme {
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
}
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="save()">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme">Please hide me, but bring me back later ;-)</div>
I believe you can have more dynamism by making better use of css selectors and adding an attribute with the same input id to the divs you intend to show/hide.
HTML:
<label class="switch">
<input type="checkbox" id="ck1">
<span class="slider round hide-off"></span>
</label>
<br><br>
<label class="switch">
<input type="checkbox" id="ck2">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div class="hideme" id="label-ck1">Please hide me...</div>
<div class="hideme" id="label-ck2">Please hide me...</div>
JAVASCRIPT
$(document).ready(function(){
getLocalStatus()
$(".switch input").on("change", function(e) {
const element = e.currentTarget;
saveStatus(element)
setLabelVisibility(element.getAttribute('id'),element.checked);
})
})
function getLocalStatus() {
const checkboxes = $('input[type=checkbox]');
checkboxes.each(function(index,checkbox){
const checkboxId = checkbox.getAttribute('id')
var currentStatus= localStorage.getItem(checkboxId)
if (currentStatus == "true") {
currentStatus = true;
} else {
currentStatus = false;
}
checkbox.checked = currentStatus;
setLabelVisibility(checkboxId, currentStatus)
})
}
function setLabelVisibility(id,status){
const label = $("#label-" + id + "");
if(status == false){
label.hide();
return;
}
label.show();
}
function saveStatus(e) {
localStorage.setItem(e.getAttribute('id'), e.checked)
}
You need to give your show/hide DIVs different IDs and pass those into the function. (this is just one of several ways)
The element you want to show/hide needs a unique ID so we can differentiate it from the others, so forget about using a class as a selector here. The toggle function takes two parameters, the element that called it and the element ID that gets toggled. In the HTML below, 'this' will refer to that specific checkbox when its clicked. '#div1' and '#div2' are the IDs of the elements to toggle.
I've added in your local storage bit.
function toggle(p, c){
if ($(p).prop("checked")){
$(c).show();
}else{
$(c).hide();
}
localStorage.setItem($(p).attr("id"), JSON.stringify($(p).prop("checked")));
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*END OF TOGGLE SWITCH*/
.hideme{
padding:20px;
background: blue;
color: white;
font-weight: 800;
text-align: center;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="ck1" onchange="toggle(this, '#div1')">
<span class="slider round hide-off"></span>
</label>
<label class="switch">
<input type="checkbox" id="ck2" onchange="toggle(this, '#div2')">
<span class="slider round hide-off"></span>
</label>
<br><br>
<div id="div1" class="hideme">Please hide me, but bring me back later ;-)</div>
<div id="div2" class="hideme">Please hide me, but bring me back later ;-)</div>
This is another possible solution and one that I would prefer:
Change the input as so:
<input type="checkbox" id="ck1" class="btn" data-toggle-id="#div1">
Then the javascript (with jquery) would look like this instead:
$('.btn').on('change', function(){
var $d = $($(this).attr('data-toggle-id'));
if ($(this).prop("checked")){
$d.show();
}else{
$d.hide();
}
});
Related
I am trying to create a toggle button. Here is the code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
In my javascript code - I read the 'checkbox' value. If the value is true then I add another div and this another div also has a close button. When the close button is hit, I remove this newly added div from the dom.
So far this all works fine.
I also want to toggle back the button. I am setting up the value to false with the following line:
document.getElementsByName("addUserConfirmation").checked = false;
It does set the value to false, but the toggle button still remain blue. How do I set it back to off?
Here is the code snippet:
function removeCardRevertToggleButton(button, container) {
var parentContainer = document.getElementById(container);
jQuery(parentContainer).children().remove();
document.getElementsByName("addConfirmation").checked = false;
}
<div class="boxStyle">
<span class="closeButton" requestid="" onclick="removeCardRevertToggleButton(this, "inviteContainerContext")">×</span>
</div>
Here is the jsfiddle:
https://jsfiddle.net/u9y2w8ev/15/
When close ('x') button is clicked, I want to switch the toggle button to off.
document.getElementsByName("addConfirmation") returns an array (Elements). You have to access an array element like this
document.getElementsByName("addUserConfirmation")[0].checked
function removeCardRevertToggleButton(button) {
document.getElementsByName("addUserConfirmation")[0].checked = false;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<body>
<label class="switch">
<input type="checkbox" name="addUserConfirmation" checked>
<span class="slider round"></span>
</label>
<div class="boxStyle">
<span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
</span>
</div>
</body>
I have updated fiddle as https://jsfiddle.net/k086xnpd/
HTML Code:
<body>
<label class="switch">
<input type="checkbox" id="test" name="addUserConfirmation" checked>
<span class="slider round"></span>
</label>
<div class="boxStyle">
<span class="closeButton" onclick='removeCardRevertToggleButton(this)'>×
</span>
</div>
</body>
JS Code:
function removeCardRevertToggleButton(button) {
alert("Clicked, new value = " + button.checked);
//var parentContainer = document.getElementById(container);
//jQuery(parentContainer).children().remove();
document.getElementById("test").checked = false;
document.getElementById("test").addClass('slider:before');
}
Hoping that is what you were looking for :)
iam desiging a web site that can change the prices
when for first time i click on slider the price become 19.99 and for the next time my price become 199.99.
my project is this https://www.frontendmentor.io/challenges/pricing-component-with-toggle-8vPwRMIC
im using a variable if the variable ==1 then change the price to 199.99 and when the variable ==2 then change price to 19.99 ; but every time i click the price stays on 19.99:/
$(function(){
var m = 1;
$(".switch").click(function(){
if(m == 1){
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else{
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
when i click both hi and bye alerts ,alerted and i dont know why ???:///
the return statment in if block also doesn't the solution, i tried.
As far as I think price ain't defined.
$(".switch").click(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
$(document).ready(function(){
if(document.getElementById('isAgeSelected').checked) {
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
} else {
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
}
});
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="isAgeSelected" value="Yes">
<span class="slider"></span>
</label>
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
I HOPE THIS MIGHT SOLVE YOUR PROBLEM IN A EASY WAY
Considering your limited code, I tried recreating it:
Looks like you're not passing prices values correctly, the if and else conditions are correct, you can change the values in the first line and try checking it, I was able to run both the conditions. The issues seems you're not sending the correct values to prices.
var prices = 0; /* change to you values here from 0 to 1 */
$(document).ready(function() {
var m = 1;
$(".divSwitch").click(function() {
if (prices == 1) {
alert("hi");
$("#h1").html("$199.99");
$("#h2").html("$249.99");
$("#h3").html("$399.99");
m = 0;
} else {
alert("bye");
$("#h1").html("$19.99");
$("#h2").html("$24.99");
$("#h3").html("$39.99");
m = 0;
}
});
});
.divSwitch {
background-color: red;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="divSwitch" sytle="height:50px;width:50px;background-color:red;">Click here.
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
</div>
I have multiple checkboxes that have the same ID for different screen resolutions. When I click on the Check 1 label the checkmark gets highlighted. In the example provided both check 1 and check2 have the same IDs, when I click on check 1 I want the check mark of check 2 too also be highlighted and vice versa.
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A">Check1
<span for="10A" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A">Check2
<span for="10A" class="checkmark"></span >
</label >
</div>
How do I highlight all the checkmarks of the same IDS?
Highlighting is in your case based on the :checked selector -> if the checkbox is checked, the span behind it is highlighted.
In your case you will need javascript to react on the onchange / click event on the checkbox and trigger the other checkbox aswell.
A basic setup how to use it, you will need to alter that to your needs:
// use click or onchange
document.getElementById('checkbox1').addEventListener('click', function () {
document.getElementById('checkbox2').click();
});
You can do it with this javascript code.
This code does the following:
Add an event listener to the change event of both check boxes.
Set the checked property of the other checkbox to the same value as the checked property of the checkbox where the change event triggered on.
Note: I changed the id's of the check boxes to make them unique.
document.getElementById('10A-1').addEventListener('change', function () {
document.getElementById('10A-2').checked = this.checked;
});
document.getElementById('10A-2').addEventListener('change', function () {
document.getElementById('10A-1').checked = this.checked;
});
.checkmark {
display: inline-block;
width: 22px;
/*height: 22px;*/
height: 17px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50%;
margin-bottom: 1px;
}
.checkmark::before {
content: '';
position: absolute;
width: 3px;
height: 9px;
background-color: #ccc;
left: 11px;
top: 6px;
}
.checkmark {
cursor: pointer;
}
.checkmark::after {
content: '';
position: absolute;
width: 3px;
height: 3px;
background-color: #ccc;
left: 8px;
top: 12px;
}
input[type="checkbox"]:checked+.checkmark:before,
input[type="checkbox"]:checked+.checkmark:after {
background: linear-gradient(rgb(42, 104, 149) 0px, rgb(44, 109, 157) 100%);
}
<div class="menu-lg">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'">
<input type= "checkbox" style= "display:none;" id="10A-1">Check1
<span for="10A-1" class="checkmark"></span >
</label >
</div>
<div class="menu-sm">
<label style="display: inline;color: #545454;font-weight:100;" dataid="' +this.ID +'" >
<input type= "checkbox" style= "display:none;" id="10A-2">Check2
<span for="10A-2" class="checkmark"></span >
</label >
</div>
//Run it after document ready
var checkbox = $('input[type="checkbox"]');
$(checkbox).on('click', function(){
if($(this).is(':checked')){
$(checkbox).prop('checked', true);
}
else{
$(checkbox).prop('checked', false);
}
});
I like to use checkbox in AngularJs for user's decision.
I can't catch checkbox's state change in my AngularJs code.
My html code is
<div ng-show="acceptrequest">
<label class="switchnmn">
<input type="checkbox" ng-change="stateChanged()" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
AngularJs code is
$scope.stateChanged = function ( ) {
if(){ //If it is checked
$scope.acceptrequest = true;
}
else
$scope.acceptrequest = false;
}
When checkbox is checked, $scope.acceptrequest should be true and unchecked $scope.acceptrequest should be false. How can I do that?
I implemented checkbox is slider in css
.switchnmn {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switchnmn input {display:none;}
.slidernmn {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slidernmn:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slidernmn {
background-color: #2196F3;
}
input:focus + .slidernmn {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slidernmn:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slidernmn.round {
border-radius: 34px;
}
.slidernmn.round:before {
border-radius: 50%;
}
label, b {
vertical-align: middle;
}
Declare ng-model for the checkbox and now you can access the value of check box inside the controller.
<div ng-show="acceptrequest">
<label class="switchnmn">
<input type="checkbox" ng-model="checkBoxValue" ng-change="stateChanged()" checked>
<div class="slidernmn round"></div>
</label>
<b style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
controller:
$scope.stateChanged = function ( ) {
if($scope.checkBoxValue){
$scope.acceptrequest = true;
}
else
$scope.acceptrequest = false;
}
add ngModel to checkbox and check that variable inside the if condition
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.checkBtn = true;
$scope.acceptrequest = true;
$scope.stateChanged = function ( ) {
if($scope.checkBtn){ //If it is checked
$scope.acceptrequest = true;
}
else
$scope.acceptrequest = false;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div>
<label class="switchnmn">
<input type="checkbox" ng-change="stateChanged()" checked ng-model="checkBtn">
<div class="slidernmn round"></div>
</label>
<b ng-show="acceptrequest" style="font-size:15px">I am able to accept customer's any request date.</b>
</div>
</div>
I have 4 images on the html site just two are visible . Thumbs Up and thumbs down. I have javascript code and i want the user can choose only one of the possibilities. If user click on thumbs up or down it get donker color. But my script lets allow user choose both possibilities.
i want this
Html Code:
<body>
<img id="myImage" onclick="changeImage()" src="../Image/kleindownglow.jpg">
<img id="myImage2" onclick="changeImage2()" src="../Image/kleinupglow.png">
</body>
Script
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("glow")) {
image.src = "../Image/kleindown.jpg";
} else {
image.src = "../Image/kleindownglow.jpg";
}
}
function changeImage2() {
var image2 = document.getElementById('myImage2');
if (image2.src.match("upglow")) {
image2.src = "../Image/kleinup.png";
} else {
image2.src = "../Image/kleinupglow.png";
}
}
Thank you for any help
HTML
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
CSS
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 2px;
width: 24px; height: 24px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
}
[type="checkbox"]:not(:checked) + label:before
{
background-image: url('https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Bad%20mark.png');
}
[type="checkbox"]:checked + label:before
{
background-image: url('https://cdn1.iconfinder.com/data/icons/icojoy/noshadow/standart/gif/24x24/001_18.gif') !important;
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
position: absolute;
top: 0; left: 4px;
font-size: 14px;
color: #09ad7e;
transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="checkbox"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
color: #999;
}
[type="checkbox"]:disabled + label {
color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
border: 1px dotted blue;
}
/* hover style just for information */
label:hover:before {
border: 1px solid #4778d9!important;
}
JQuery
$("input[type='checkbox']").change(function(){
var checkedSt=$(this).prop('checked');
alert(checkedSt ? "Like" : "UnLike");
});
DEMO
Indeterminate added
DEMO
Here's JSBin that solves your issue: http://jsbin.com/fiwadinosemi/1/edit
What it does:
If both are unselected and you press one of them - pressed item is glowed
If one item is glowed and you press it - it just removes glowing effect
If one item is glowes and you press other one - other one is glowed and old one is unglowed
So, this is normal behavior for up/downvote buttons
If you want to make your code work, you would need to add a reference to the opposite image in your code and set that image to the unselected version.
If I were to do this, it would be pure CSS with a sprite and radio buttons.
HTML:
<input type="radio" name="vote1" class="vote" id="down1" value="down" /><label for="down1"></label>
<input type="radio" name="vote1" class="vote" id="up1" value="up" /><label for="up1"></label>
<hr/>
<input type="radio" name="vote1" class="vote" id="down2" value="down" /><label for="down2"></label>
<input type="radio" name="vote1" class="vote" id="up2" value="up" /><label for="up2"></label>
CSS:
.vote { display: none; }
.vote + label {
display: inline-block;
width:55px;
height:65px;
background-image: url(http://i.imgur.com/oRg1EVq.png);
}
.vote[value="up"] + label {
background-position: 55px 66px;
}
.vote[value="up"]:checked + label {
background-position: 55px 0px;
}
.vote[value="down"] + label {
background-position: 0px 66px;
}
.vote[value="down"]:checked + label {
background-position: 0px 0px;
}
Image:
Imgur
Fiddle:
http://jsfiddle.net/coL4LhtL/