Beispiel:CSS3 pointer-events-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<style>
/* Bugfix für veraltete Webkits */
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
</style>
<script>
/* Bugfix für veraltete Webkits */
/* keine Funktionalität, nur Nachrüsten der Standardkonformität */
window.addEventListener("load",function(){
if (document.body.style.WebkitAnimation != undefined) {
var elms = document.getElementsByName("teilnahme");
for (var i = 0; i < elms.length; i++) {
elms[i].addEventListener("change",function() {
document.body.style.WebkitAnimation = "bugfix infinite 1s";
window.setTimeout(function(){ document.body.style.WebkitAnimation = ""; },1500);
});
}
}
});
</script>
<style>
fieldset {
position: relative;
margin: 1em 0;
padding: 1.25em 0;
border: 0 none;
}
label{
position: absolute;
display: block;
left: 0;
top: 0;
width: 5em;
padding: .5em;
background-color: white;
border: medium solid #c82f04;
text-align: center;
}
:checked + label {
z-index: 10;
pointer-events: none;
}
:checked + label + input + label {
pointer-events: none;
}
label[for="tn-vielleicht"] {
background-color: gold;
}
label[for="tn-nein"] {
background-color: red;
}
label[for="tn-ja"] {
background-color: green;
}
input {
display: none;
}
button {
display: block;
}
</style>
<title>CSS pointer-events - 2</title>
</head>
<body>
<h1>CSS pointer-events - 2</h1>
<form>
<p>Ich nehme an der Veranstaltung teil. (ja | nein | vielleicht)</p>
<fieldset>
<input id="tn-vielleicht" type="radio" name="teilnahme" value="0" checked="checked"><label for="tn-vielleicht">vielleicht</label>
<input id="tn-nein" type="radio" name="teilnahme" value="-1"><label for="tn-nein">nein</label>
<input id="tn-ja" type="radio" name="teilnahme" value="1"><label for="tn-ja">ja</label>
</fieldset>
<button>abschicken</button>
</form>
</body>
</html>
