Can anyone tell me why this isn't working? Custom checkbox

HTML & CSS
1

Check out this fiddle http://jsfiddle.net/73r6P/2/

If i put checked=“checked” on the input the checkmark styling appers and looks correct. But I can uncheck/check the input.

Anyone know why?

2

Hey,

Everything with the checkbox should be okay now. First, I fixed some css errors with the first declaration which may have caused the problem. Next, there were syntax error with the label tag. I have attached an example of that code below:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
    <title>Checkbox</title>
		<style>
			.checkbox-container {
				width: 15px;
				height: 15px;
				margin-right: 10px;
				position: relative;
				float: left; 
			}
			.checkbox-container label {
				position: absolute;
				top: 0;
				left: 0;
				width: 15px;
				height: 15px;
				background: transparent;
				border: 1px solid #000;
				cursor: pointer; 
			}
			.checkbox-container input:checked + label:after {
				content: '';
				position: absolute;
				width: 14px;
				height: 7px;
				background: transparent;
				top: -2px;
				left: 2px;
				border: 3px solid #000;
				border-top: none;
				border-right: none;
				-webkit-transform: rotate(-45deg);
				-moz-transform: rotate(-45deg);
				-o-transform: rotate(-45deg);
				-ms-transform: rotate(-45deg);
				transform: rotate(-45deg); 
			}
			input[type="checkbox"] {
				visibility: hidden; 
			}
		</style>
  </head>
  <body>
		<div class="checkbox-container">
			<input type="checkbox" name="filter-choice" id="checkbox1" checked />
			<label for="checkbox1"></label>
		</div>
	</body>
3

thanks, hade missed your reply=) is it so that input needs to have an ID for this to work? Is there anyway I could do this without ID’s? I have like 100 checkboxes and the user should be able to dynamically add more.

4

A label is used to help screen readers correctly indicate a form element for a check box. Each ID for the input must be unique, so instead of hand coding everything, please look into a script that could accomplish that task for you. Using a code assistant package such as Sparkup or Emmet in your text editor may help.

5

Hi,

You can do it without ids if you wrap the input in the label (which is still accessible).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.checkbox-container label {
	width: 15px;
	height: 15px;
	margin-right: 10px;
	position: relative;
	float: left;
}
.checkbox-container span {
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 15px;
	background: transparent;
	border: 1px solid #000;
	cursor: pointer;
	background:red
}
.checkbox-container input:checked + span:after {
	content: '';
	position: absolute;
	width: 14px;
	height: 7px;
	background: transparent;
	top: -2px;
	left: 2px;
	border: 3px solid #000;
	border-top: none;
	border-right: none;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
input[type="checkbox"] {
	position:absolute;
	left:-999em;
}
</style>
</head>

<body>
<div class="checkbox-container">
  <label>
    <input  type="checkbox" name="filter-choice" >
    <span></span> </label>
</div>
<div class="checkbox-container">
  <label>
    <input  type="checkbox" name="filter-choice2">
    <span></span> </label>
</div>
</body>
</html>
6

thanks worked fine!=)