cypnk/checkboxconf.html

## checkboxconf.html
<!DOCTYPE html>
<html>
<head>
<title>Delete confirmation</title>
<style>
	body { font: 400 1em sans-serif; background: #f9f9ff; color: #444; }

	label {
		cursor: pointer;
	}

	/* Second confirmation container is hidden initially */
	input[rel='conf'] ~ [rel='conf'] {
		display: none;
	}

	/* Second container revealed if the first checkbox is checked */
	input[rel='conf']:checked ~ [rel='conf'] {
		display: inline-block;
	}
</style>
</head>
<body>
<form method="post" action="/">
<p>
	<!-- Primary checkbox -->
	<input type="checkbox" name="del" id="del" value="1" rel="conf" />
	<label for="del">Delete this post</label>

	<!-- Secondary confirmation package -->
	<span rel="conf"> |
		Are you sure?
		<label>
			<strong>This cannot be undone</strong>
			<!-- Secondary checkbox -->
			<input type="checkbox" name="delconf" value="1" />
		</label>
	</span>
</p>

<p><input type="submit" value="Post" /></p>

</form>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Delete confirmation</title>
	<style>
	body { font: 400 1em sans-serif; background: #f9f9ff; color: #444; }

	label {
	cursor: pointer;
	}

	/* Second confirmation container is hidden initially */
	input[rel='conf'] ~ [rel='conf'] {
	display: none;
	}

	/* Second container revealed if the first checkbox is checked */
	input[rel='conf']:checked ~ [rel='conf'] {
	display: inline-block;
	}
	</style>
	</head>
	<body>
	<form method="post" action="/">
	<p>
	<!-- Primary checkbox -->
	<input type="checkbox" name="del" id="del" value="1" rel="conf" />
	<label for="del">Delete this post</label>

	<!-- Secondary confirmation package -->
	<span rel="conf"> \|
	Are you sure?
	<label>
	<strong>This cannot be undone</strong>
	<!-- Secondary checkbox -->
	<input type="checkbox" name="delconf" value="1" />
	</label>
	</span>
	</p>

	<p><input type="submit" value="Post" /></p>

	</form>

	</body>
	</html>