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>
CSS pointer-events - 2
<form>
Ich nehme an der Veranstaltung teil. (ja | nein | vielleicht)
<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>