Hello, I have created a small CSS checkbox and radio buttons. But the problem is that when I check only one, all of them check with that one. So I can't check a single box. Can you check the code a tell me what is wrong.
here is the page where I am testing: http://www.farrislab.net/checkbox/
Thank you,
Farris
Jump to PostHeh heh. Well it's as you describe. WHy haven't you included the CSS / JS? Can't advise unless we see what you've done. Sorry not trawling through your site to get at the info.
Jump to PostSolution: change all ~ symbols to +
Also give the label for attributes the right values. e.g.
<input type="checkbox" name="checkbox2" id="checkbox2" class="switch" checked="checked" /> <label for="checkbox1">First</label><br /><br />Should be:
<input type="checkbox" name="checkbox2" id="checkbox2" class="switch" checked="checked" /> <label for="checkbox2">First</label><br /><br />BTW …
Heh heh. Well it's as you describe. WHy haven't you included the CSS / JS? Can't advise unless we see what you've done. Sorry not trawling through your site to get at the info.
I have created this page specifically for this problem. I think it is better to check the page.
But I will post the code if you want to ...
CSS:
/* CSS Document */
body{
margin:0px;
background-color:#333;
color:#FFF;
}
#Header{
width:330px;
height:30px;
padding:10px;
color:#FFF;
margin:0px 20px;
margin-top:20px;
font-size:28px;
background-color:#222;
}
#Body{
width:330px;
height:auto;
overflow:auto;
padding:10px;
background-color:#FFF;
color:#333;
margin:0px 20px;
}
input.switch:empty{
margin-left:30px;
}
input.switch:empty ~ label{
position:relative;
float:left;
line-height:25px;
text-indent:70px;
margin:0px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
input.switch:empty ~ label:before, input.switch:empty ~ label:after{
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '\2716';
width: 60px;
text-indent: 40px;
color: #900;
background-color: #c33;
border-radius: 5px;
}
input.switch:empty ~ label:after{
content: ' ';
width: 20px;
top: 1px;
bottom: 1px;
text-align: center;
text-indent: 0;
margin-left: 1px;
color: #f88;
background-color: #fff;
border-radius: 5px;
-webkit-transition: all 100ms ease-in;
transition: all 100ms ease-in;
}
input.switch:checked ~ label:before{
content: '\2714';
text-indent: 5px;
color: #6f6;
background-color: #393;
}
input.switch:checked ~ label:after{
margin-left: 39px;
color: #6c6;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div id="Header">Checkbox and Radio Button</div>
<div id="Body">
<h3>Checkbox:</h3>
<form name="test" method="POST">
<input type="checkbox" name="checkbox1" id="checkbox1" class="switch" />
<label for="checkbox1">First Checkbox</label><br /><br />
<input type="checkbox" name="checkbox2" id="checkbox2" class="switch" checked="checked" />
<label for="checkbox1">First</label><br /><br />
<input type="checkbox" name="checkbox3" id="checkbox3" class="switch" />
<label for="checkbox1">First Checkbox</label><br /><br />
<h3>Radio:</h3>
<input type="radio" name="radio_1" id="radio_1" class="switch" />
<label for="radio_1">First Checkbox</label><br /><br />
<input type="radio" name="radio_1" id="radio_2" class="switch" />
<label for="radio_2">First Checkbox</label><br /><br />
<input type="radio" name="radio_1" id="radio_3" class="switch" />
<label for="radio_3">First Checkbox</label>
</form>
</div>
</body>
</html>
I have created this page specifically for this problem. I think it is better to check the page.
But I will post the code if you want to ...
With all due respect, are you doing me a favour? I checked the page and saw that the checkboxes weren't working. Did you expect me to go trawling through your CSS, markup, js etc?
You asked the question, so you should provide all the relevant information. If you want an answer, that is. We shouldn't have to ask for it.
Solution: change all ~ symbols to +
Also give the label for attributes the right values. e.g.
<input type="checkbox" name="checkbox2" id="checkbox2" class="switch" checked="checked" />
<label for="checkbox1">First</label><br /><br />
Should be:
<input type="checkbox" name="checkbox2" id="checkbox2" class="switch" checked="checked" />
<label for="checkbox2">First</label><br /><br />
BTW - <br /> for layout - bad. You still using XHTML for some reason?
Hi there, I thank you for your help. I didn't mean the above quotation in a bad way. I just wanted you to check the page because it will be easier for you and me :)
It works perfectly. Really thank you very much
By the way how come you are the only one here to answer?
I love Dani Web but it seems like they don't have a lot of members who contribute
Sorry Farris - must have had a really grumpy 5 minutes. Apologies.
We're undergoing a bit of a transition, so it's possible that many of the old faithful are still getting to grips with the system. Also the Panda update knocked for 6 a while back and it's taking some time to claw our way back into the rankings.
In addition, if we see a valid answer, it's often the case that we let sleeping dogs lie. Glaad you got it sorted :)
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.