Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<h1> Stylování slideru </h1> <input type="range">
HTML
Autoformát
Standardní režim
Mobilní zobrazení
input[type=range], input[type=range]::-webkit-slider-runnable-track, input[type=range]::-webkit-slider-thumb { appearance: none; } input[type=range]::-moz-range-track { background: #DCDCDC; border-radius: 12px; height: 12px; } input[type=range]::-webkit-slider-runnable-track { background: #DCDCDC; border-radius: 12px; height: 12px; } input[type=range]::-webkit-slider-thumb { box-sizing: border-box; width: 30px; height: 30px; border-radius: 100%; border: 5px solid #fff; background: #00B873; box-shadow: 0 0 0 1px #DCDCDC; position: relative; top: -8px; } input[type=range]::-moz-range-thumb { box-sizing: border-box; width: 30px; height: 30px; border-radius: 100%; border: 5px solid #fff; background: #00B873; box-shadow: 0 0 0 1px #DCDCDC; position: relative; top: -8px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>