checkable
appearance: none 를 활용한 checkbox와 radio 의 모양
https://github.com/mins01/ui_checkable
https://mins01.github.io/ui_checkable/
with bootstrap btn-group
submit
f1 :
1
2
4
5
f2 :
1
2
4
5
check-btn with bootstrap btn-group
submit
f1 :
f2 :
check-btn with bootstrap btn-group
submit
f1 :
f2 :
check-btn with bootstrap btn
submit
f1 :
f2 :
checkbox
submit
browser default
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-img
.checkable.check-btn
checkbox with .rounded
submit
.checkable.rounded.check-box
.checkable.rounded.check-mark
.checkable.rounded.check-text
.checkable.rounded.check-img
checkbox with .diamond
submit
.checkable.diamond.check-box
.checkable.diamond.check-mark
.checkable.diamond.check-text
.checkable.diamond.check-img
radio
submit
browser default
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-img
.checkable.check-btn
radio with .square
submit
.checkable.square.check-box
.checkable.square.check-mark
.checkable.square.check-text
.checkable.square.check-img
radio with .diamond
submit
.checkable.diamond.check-box
.checkable.diamond.check-mark
.checkable.diamond.check-text
.checkable.diamond.check-img
--checkable-check-text
submit
--checkable-check-text:'🦄'
--checkable-check-text:'☁️'
--checkable-check-text:'한글'
--checkable-check-text:'ABC'
--checkable-check-text:'漢字'
--checkable-check-img
submit
.check-img
--checkable-check-img:url('checkable/check-img-2.png')
--checkable-check-text-font-size
submit
--checkable-check-text-font-size:0.5em
--checkable-check-text-font-size:1em
--checkable-check-text-font-size:2em
--checkable-check-text-font-size:3em
--checkable-check-text-font-size:4em
disabled
submit
.checkable.check-box
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-img
with .transition
submit
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-img
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-img
with .transition.transition-blur
submit
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-img
.checkable.transition.check-box
.checkable.transition.check-mark
.checkable.transition.check-text
.checkable.transition.check-img
h1~h6
submit
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-box
.checkable.check-mark
.checkable.check-text
.checkable.check-box
.checkable.check-mark
.checkable.check-text
color(--checked-color) with .check-box
submit
.checkable.primary
.checkable.secondary
.checkable.success
.checkable.info
.checkable.warning
.checkable.danger
.checkable.light
.checkable.dark
color(--border-color) with .check-box
submit
.checkable.border-primary
.checkable.border-secondary
.checkable.border-success
.checkable.border-info
.checkable.border-warning
.checkable.border-danger
.checkable.border-light
.checkable.border-dark
color(--checked-color and --border-color) with .check-box
submit
.checkable.border-primary.primary
.checkable.border-secondary.secondary
.checkable.border-success.success
.checkable.border-info.info
.checkable.border-warning.warning
.checkable.border-danger.danger
.checkable.border-light.light
.checkable.border-dark.dark
color(--checked-color) with .check-mark
submit
.checkable.primary
.checkable.secondary
.checkable.success
.checkable.info
.checkable.warning
.checkable.danger
.checkable.light
.checkable.dark
color(--border-color) with .check-mark
submit
.checkable.border-primary
.checkable.border-secondary
.checkable.border-success
.checkable.border-info
.checkable.border-warning
.checkable.border-danger
.checkable.border-light
.checkable.border-dark
color(--checked-color and --border-color) with .check-mark
submit
.checkable.border-primary.primary
.checkable.border-secondary.secondary
.checkable.border-success.success
.checkable.border-info.info
.checkable.border-warning.warning
.checkable.border-danger.danger
.checkable.border-light.light
.checkable.border-dark.dark
color(--checked-color) with .check-text
submit
.checkable.primary
.checkable.secondary
.checkable.success
.checkable.info
.checkable.warning
.checkable.danger
.checkable.light
.checkable.dark
color(--border-color) with .check-text
submit
.checkable.border-primary
.checkable.border-secondary
.checkable.border-success
.checkable.border-info
.checkable.border-warning
.checkable.border-danger
.checkable.border-light
.checkable.border-dark
color(--checked-color and --border-color) with .check-text
submit
.checkable.border-primary.primary
.checkable.border-secondary.secondary
.checkable.border-success.success
.checkable.border-info.info
.checkable.border-warning.warning
.checkable.border-danger.danger
.checkable.border-light.light
.checkable.border-dark.dark
checkable-var-reset
submit
default
square
rounded
diamond
default
square
rounded
diamond
default
square
rounded
diamond
default
square
rounded
diamond
checkable-var-red (custom checkable-var)
submit
default
square
rounded
diamond
default
square
rounded
diamond
default
square
rounded
diamond
default
square
rounded
diamond
checkable-var-red (custom checkable-var)
submit
default
square
rounded
diamond
default
square
rounded
diamond
default
square
rounded
diamond
default
square
rounded
diamond