Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<p> Najetí na tento text odhalí princip (vypne overflow). </p> <form> <label class="hv1"><input type=radio name="hodnoceni" value="1"></label> <label class="hv2"><input type=radio name="hodnoceni" value="2"></label> <label class="hv3"><input type=radio name="hodnoceni" value="3"></label> <label class="hv4"><input type=radio name="hodnoceni" value="4"></label> <label class="hv5"><input type=radio name="hodnoceni" value="5"></label> <div> 1<br>2<br>3<br>4<br>5 </div> </form> Vyrobeno pro vlákno <a href="http://djpw.cz/152270">Jak co nejlépe zapisovat JS</a>.
HTML
Autoformát
Standardní režim
Mobilní zobrazení
form { width: 120px; height: 20px; margin: 20px; overflow: hidden; position: relative; } label { float: left; width: 20px; height: 100px; background: red; } input { position: absolute; left: -20px; } .hv1 { background: red } .hv2 { background: gold } .hv3 { background: green } .hv4 { background: blue } .hv5 { background: black } .hv1 input { top: 0px } .hv2 input { top: 20px } .hv3 input { top: 40px } .hv4 input { top: 60px } .hv5 input { top: 80px } /* Na pozadí labelů by měl být obrázek s hvězdami s odpovídajícím background-position, aby vytvořil při rozbaleném overflow: X0000 XX000 XXX00 XXXX0 XXXXX Při obráceném pořadí labelů by šlo udělat i pěkný hover efekt. */ /* Styly pro názornost: */ form div { float: left; width: 20px; height: 100px; line-height: 20px; text-align: center; } p { position: absolute; bottom: 0; left: 0; padding: 0.5em; border-top: 1px dotted; } p:hover+form { overflow: visible; margin-bottom: 100px }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>