Change appearance of a checkbox

coding_noobie · August 18, 2015, 4:37pm

I want to have different images displayed for a checkbox and when somebody clicks on the box the image changes but I’m not sure how to do this.

This is what I’ve got so far: http://jsfiddle.net/thehappyappy/apo3hqre/3/

RyanReese · August 18, 2015, 4:44pm

Hey there. You don’t need jQuery / JS for this .

PVgr · August 19, 2015, 8:13am

I’m afraid that JavaScript is needed, to replace default checkboxes with custom images, across the board. iCheck is one of the best plugins for the job.

coothead · August 19, 2015, 9:49am

The following example does not have the slightest whiff of “Javascript”…

[code]

untitled document #myform label { display:block; width:22px; height:22px; margin:5px 0; background-image:url(http://coothead.co.uk/images/blue.png); } #myform label:hover { background-position:-24px 0; } #myform input[type="checkbox"]:checked~label { background-position:-48px 0; } #myform input[type="checkbox"] { display:none; } #myform input[type="submit"] { display:block; margin-top:5px; }

classical

pop

rock

country

indie

easy listening

[/code]

coothead

coothead · August 19, 2015, 10:57am

…and here is similar code for input type=“radio”…

[code]

untitled document #myform div { margin:5px 0; overflow:hidden; } #myform label { display:inline-block;float:left; width:22px; height:22px; margin-right:10px; background-image:url(http://coothead.co.uk/images/blue.png); background-position:-120px 0; } #myform label:hover { background-position:-144px 0; } #myform input[type="radio"]:checked~label { background-position:-168px 0; } #myform input[type="radio"]:checked~span { color:#2489c5; } #myform input[type="radio"] { display:none; } #myform input[type="submit"] { display:block; margin-top:5px; }

0

1

2

3

4

5

[/code] ...just in case. :relieved:

coothead

coding_noobie · August 19, 2015, 11:13am

Thank you that’s exactly what I’m after!

PVgr · August 19, 2015, 11:23am

You are right, this solution does not depend on JavaScript, but it depends on specific HTML order, which, under circumstances, may not be an option.

ronpat · August 19, 2015, 11:26am

I’ll go for specific HTML order over JavaScript required any day of the week and twice on Sunday.

coding_noobie · September 1, 2015, 3:58pm

I’m really sorry to be a pain but how do I change this so that if a form is generated rather than me creating it it still has the images instead of checkboxes?

I’ve changed it to this but it doesn’t work (the form is the code that’s generated when the page loads:

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
#0-form label {
    display:block;
    width:22px;
    height:22px;
    margin:5px 0;
    background-image:url(http://coothead.co.uk/images/blue.png);
 }
#0-classical label:hover {
    background-position:-24px 0;
}
#0-classical input[type="checkbox"]:checked~label {
    background-position:-48px 0;
 }
#0-form #0-pop label:hover {
    background-position:-14px 0;
}
#0-form #0-pop input[type="checkbox"]:checked~label {
    background-position:-38px 0;
 }
#0-form input[type="checkbox"] {
    display:none;
 }
#0-form input[type="submit"] {
    display:block;
    margin-top:5px;
 }
</style>
</head>
<body>
<form id="0-form" action="#" method="post">
<div id="line-0-zip" class="input_line">
<div class="input_title">Your Zip Code</div>
<div id="input-0-zip" class="input_input">
<input id="0-zip" class="input_text autofocus" style="width: 200px;" type="text" name="zip" value="">
<span id="err-0-zip" class="input_error"></span>
</div>
</div>

<div id="line-0-classical" class="input_line">
<div class="input_title">classical</div>
<div id="input-0-classical" class="input_input">
<input id="0-classical" type="checkbox" name="classical">
<span id="err-0-classical" class="input_error"></span>
</div>
</div>

<div id="line-0-pop" class="input_line">
<div class="input_title">pop</div>
<div id="input-0-pop" class="input_input">
<input id="0-pop" type="checkbox" name="pop">
<span id="err-0-pop" class="input_error"></span>
</div>
</div>

<div id="line-0-rock" class="input_line">
<div class="input_title">rock</div>
<div id="input-0-rock" class="input_input">
<input id="0-rock" type="checkbox" name="rock">
<span id="err-0-rock" class="input_error"></span>
</div>
</div>

<div id="line-0-country" class="input_line">
<div class="input_title">country</div>
<div id="input-0-country" class="input_input">
<input id="0-country" type="checkbox" name="country">
<span id="err-0-country" class="input_error"></span>
</div>
</div>

<div id="line-0-indie" class="input_line">
<div class="input_title">indie</div>
<div id="input-0-indie" class="input_input">
<input id="0-indie" type="checkbox" name="indie">
<span id="err-0-indie" class="input_error"></span>
</div>
</div>

<div id="line-0-easy" class="input_line">
<div class="input_title">easy listening</div>
<div id="input-0-easy" class="input_input">
<input id="0-easy" type="checkbox" name="easy">
<span id="err-0-easy" class="input_error"></span>
</div>
</div>

<div class="input_line" style="margin-bottom: 0px;">
<input id="0-submit" class="input_button" type="submit" value="Submit">
</div>
</form>
</body>
</html>

coothead · September 1, 2015, 7:52pm

Hi there coding_noobie,

please note that ids may not start with a numeral, in this case “0”.

I have changed then to “O” throughout, including those within the
ids for uniformity’s sake.

<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<style media="screen">
#O-form input[type="checkbox"] {
    display:none;
 }
#O-form label {
    display:block;
    width:22px;
    height:22px;
    margin:5px 0;
    background-image:url(http://coothead.co.uk/images/blue.png);
 }
#O-form label:hover {
    background-position:-24px 0;
 }
#O-classical:checked~label,#O-pop:checked~label,#O-rock:checked~label,
#O-country:checked~label,#O-indie:checked~label,#O-easy:checked~label {
    background-position:-48px 0;
 }
#O-form input[type="submit"] {
    display:block;
    margin-top:5px;
 }
</style>

</head>
<body>

<form id="O-form" action="#" metrhod="post">
<div id="line-O-zip" class="input_line">
<div class="input_title">Your Zip Code</div>
<div id="input-O-zip" class="input_input">
<input id="O-zip" class="input_text autofocus" style="width: 200px;" type="text" name="zip" value="">
<span id="err-O-zip" class="input_error"></span>
</div>
</div>

<div id="line-O-classical" class="input_line">
<div class="input_title">classical</div>
<div id="input-O-classical" class="input_input">
<input id="O-classical" type="checkbox" name="classical" value="">
<label for="O-classical"></label>
<span id="err-O-classical" class="input_error"></span>
</div>
</div>

<div id="line-O-pop" class="input_line">
<div class="input_title">pop</div>
<div id="input-O-pop" class="input_input">
<input id="O-pop" type="checkbox" name="pop" value="">
<label for="O-pop"></label>
<span id="err-O-pop" class="input_error"></span>
</div>
</div>

<div id="line-O-rock" class="input_line">
<div class="input_title">rock</div>
<div id="input-O-rock" class="input_input">
<input id="O-rock" type="checkbox" name="rock" value="">
<label for="O-rock"></label>
<span id="err-O-rock" class="input_error"></span>
</div>
</div>

<div id="line-O-country" class="input_line">
<div class="input_title">country</div>
<div id="input-O-country" class="input_input">
<input id="O-country" type="checkbox" name="country" value="">
<label for="O-country"></label>
<span id="err-O-country" class="input_error"></span>
</div>
</div>

<div id="line-O-indie" class="input_line">
<div class="input_title">indie</div>
<div id="input-O-indie" class="input_input">
<input id="O-indie" type="checkbox" name="indie" value="">
<label for="O-indie"></label>
<span id="err-O-indie" class="input_error"></span>
</div>
</div>

<div id="line-O-easy" class="input_line">
<div class="input_title">easy listening</div>
<div id="input-O-easy" class="input_input">
<input id="O-easy" type="checkbox" name="easy" value="">
<label for="O-easy"></label>
<span id="err-O-easy" class="input_error"></span>
</div>
</div>

<div class="input_line" style="margin-bottom: 0px;">
<input id="O-submit" class="input_button" type="submit" value="Submit">
</div>
</form>

</body>
</html>

coothead

coding_noobie · September 2, 2015, 9:21am

Thank you that’s perfect. The zero is actually added when the form is rendered by I’ll have a look at the php and see if I can stop it doing that.

Thank you

coothead · September 2, 2015, 2:09pm

No problem, you’re very welcome.

coothead

coding_noobie · September 2, 2015, 3:46pm

I’m really sorry to be a pain but I had to check the code slightly so that it worked for only this form and labels, but now the images don’t change when I click the image. What am I doing wrong?

This is the css I’ve got:

label.classical, label.pop, label.rock, label.country, label.indie, label.easy {
    display:block;
    width:87px;
    height:87px;
    margin:5px 0;
    background-image:url(/images/categories.jpg);
	background-size: 519px,254px;
 }
label.classical {
	background-position: 0px 173px;
}
label.pop {
	background-position: 429px 173px;
}
label.rock {
	background-position: 345px 173px;
}
label.country {
	background-position: 261px 173px;
}
label.indie {
	background-position: 174px 173px;
}
label.easy {
	background-position: 85px 173px;
}
label.muscle:hover {
	background-position: 0px 87px;
}
label.pop:hover {
	background-position: 429px 87px;
}
label.rock:hover {
	background-position: 345px 87px;
}
label.country:hover {
	background-position: 261px 87px;
}
label.indie:hover {
	background-position: 174px 87px;
}
label.easy:hover {
	background-position: 85px 87px;
}
label.classical:checked {
	background-position: 0px 261px;
}
label.pop:checked {
	background-position: 429px 261px;
}
label.rock:checked {
	background-position: 345px 261px;
}
label.country:checked {
	background-position: 261px 261px;
}
label.indie:checked {
	background-position: 174px 261px;
}
label.easy:checked {
	background-position: 85px 261px;
}

coothead · September 2, 2015, 5:33pm

Hi there coding_noobie,

I am afraid that I cannot tell from the insufficient information that you have supplied.

Having said that though, I do know that,

    background-size: 519px,254px;

…should be…

    background-size: 519px 254px;

If that does not resolve your pain, then please give us the full HTML, CSS and
image that are necessary to help us asses the problem,

coding_noobie · September 3, 2015, 11:04am

Thank you so much, here’s the full code, I’ve attached the icons file too.

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<style media="screen">
.input_button {
	background-color: #909;
	width: 313px;
	height: 48px;
}
input[type="checkbox"] {
    display:none;
 }
label.classical, label.pop, label.rock, label.country, label.indie, label.easy {
    display:block;
    width:87px;
    height:87px;
    margin:5px 0;
    background-image:url(/images/icons.jpg);
	background-size: 519px 254px;
 }
label.classical {
	background-position: 0px 173px;
}
label.pop {
	background-position: 429px 173px;
}
label.rock {
	background-position: 345px 173px;
}
label.country {
	background-position: 261px 173px;
}
label.indie {
	background-position: 174px 173px;
}
label.easy {
	background-position: 85px 173px;
}
label.classical:hover {
	background-position: 0px 87px;
}
label.pop:hover {
	background-position: 429px 87px;
}
label.rock:hover {
	background-position: 345px 87px;
}
label.country:hover {
	background-position: 261px 87px;
}
label.indie:hover {
	background-position: 174px 87px;
}
label.easy:hover {
	background-position: 85px 87px;
}
label.classical:checked {
	background-position: 0px 261px;
}
label.pop:checked {
	background-position: 429px 261px;
}
label.rock:checked {
	background-position: 345px 261px;
}
label.country:checked {
	background-position: 261px 261px;
}
label.indie:checked {
	background-position: 174px 261px;
}
label.easy:checked {
	background-position: 85px 261px;
}
#form input[type="submit"] {
    display:block;
    margin-top:5px;
 }
</style>
</head>
<body>
<form style="margin: 0px 0px 20px 0px;" id="form" action="/results/index.php" method="post">
<input type="hidden" name="commit" value="1">
<div id="line-zip" class="input_line">
<div class="input_title">Your Zip Code</div>
<div id="input-zip" class="input_input">
<input id="zip" class="input_text autofocus" style="width: 200px;" type="text" name="zip" value="">
<span id="err-zip" class="input_error"></span>
</div>
</div>

<div id="line-classical" class="input_line">
<div class="input_title">classical</div>
<div id="input-classical" class="input_input">
<input id="classical" type="checkbox" name="classical">
<label for="classical" class="classical"></label>
<span id="err-classical" class="input_error"></span>
</div>
</div>

<div id="line-pop" class="input_line">
<div class="input_title">pop</div>
<div id="input-pop" class="input_input">
<input id="pop" type="checkbox" name="pop">
<label for="pop" class="pop"></label>
<span id="err-pop" class="input_error"></span>
</div>
</div>

<div id="line-rock" class="input_line">
<div class="input_title">rock</div>
<div id="input-rock" class="input_input">
<input id="rock" type="checkbox" name="rock">
<label for="rock" class="rock"></label>
<span id="err-rock" class="input_error"></span>
</div>
</div>

<div id="line-country" class="input_line">
<div class="input_title">country</div>
<div id="input-country" class="input_input">
<input id="country" type="checkbox" name="country">
<label for="country" class="country"></label>
<span id="err-country" class="input_error"></span>
</div>
</div>

<div id="line-indie" class="input_line">
<div class="input_title">indie</div>
<div id="input-indie" class="input_input">
<input id="indie" type="checkbox" name="indie">
<label for="indie" class="indie"></label>
<span id="err-indie" class="input_error"></span>
</div>
</div>

<div id="line-easy" class="input_line">
<div class="input_title">easy listening</div>
<div id="input-easy" class="input_input">
<input id="easy" type="checkbox" name="easy">
<label for="easy" class="easy"></label>
<span id="err-easy" class="input_error"></span>
</div>
</div>

<div class="input_line" style="margin-bottom: 0px;">
<input id="submit" class="input_button" type="submit" value=" ">
</div>
</form>
</body>
</html>

coothead · September 3, 2015, 12:43pm

Hi there coding_noobie,

try it like this…

[code]

untitled document #form { margin:0 0 20px 0; } #zip { width:200px; } #form input[type="checkbox"] { display:none; } #form label{ display:block; width:115px; height:90px; margin:5px 0; background-image:url(/images/icons.jpg); } .classical { background-position:0 -208px; } .classical:hover { background-position:0 -106px; } #classical:checked~.classical { background-position:0 -7px; } .pop { background-position:-115px -208px; } .pop:hover { background-position:-115px -106px; } #pop:checked~.pop { background-position:-115px -7px; } .rock { background-position:-230px -208px; } .rock:hover { background-position:-230px -106px; } #rock:checked~.rock { background-position:-230px -7px; } .country { background-position:-345px -208px; } .country:hover { background-position:-345px -106px; } #country:checked~.country { background-position:-345px -7px; } .indie { background-position:-460px -208px; } .indie:hover { background-position:-460px -106px; } #indie:checked~.indie { background-position:-460px -7px; } .easy { background-position:-575px -208px; } .easy:hover { background-position:-575px -106px; } #easy:checked~.easy { background-position:-575px -7px; } #form input[type="submit"] { display:block; margin-top:5px; } .input_button { background-color:#909; width:313px; height:48px; }

Your Zip Code

classical

pop

rock

country

indie

easy listening

[/code]

coothead

coding_noobie · September 3, 2015, 1:34pm

Thank you so much for your help. That’s works perfectly

system · December 3, 2015, 8:34pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.