- const DOLLS = 6
form.dolls
- let d = 0
while d < DOLLS
- if (d !== (DOLLS - 1))
input(id=`doll--${d}`, type='checkbox')
label.doll(for=`doll--${d}`, style=`${d === 0 ? 'display: block;' : ''}`)= d
- d++
input(type="reset", id="reset")
label(for="reset") Reset
View Compiled
body
align-items center
background #fafafa
display flex
justify-content center
min-height 100vh
transform-style preserve-3d
::selection
background transparent
label
display none
[type='checkbox']
[type='reset']
display none
[for='reset']
cursor pointer
display block
position absolute
top 1rem
right 1rem
.doll
color #fff
cursor pointer
height 200px
font-size 2rem
left 50%
position absolute
text-align center
top 50%
transform translate(-50%, -50%)
width 100px
&:nth-of-type(even)
background blue
&:nth-of-type(odd)
background red
input:checked + label + input + label
input:checked + label + label
display block
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.