checkable

appearance: none 를 활용한 checkbox와 radio 의 모양


with bootstrap btn-group

f1 :

f2 :

check-btn with bootstrap btn-group

f1 :


f2 :

check-btn with bootstrap btn-group

f1 :


f2 :

check-btn with bootstrap btn

f1 :


f2 :

checkbox

checkbox with .rounded

checkbox with .diamond

radio

radio with .square

radio with .diamond

--checkable-check-text

--checkable-check-img

--checkable-check-text-font-size

disabled

with .transition


with .transition.transition-blur


h1~h6






color(--checked-color) with .check-box

color(--border-color) with .check-box

color(--checked-color and --border-color) with .check-box

color(--checked-color) with .check-mark

color(--border-color) with .check-mark

color(--checked-color and --border-color) with .check-mark

color(--checked-color) with .check-text

color(--border-color) with .check-text

color(--checked-color and --border-color) with .check-text

checkable-var-reset




checkable-var-red (custom checkable-var)




checkable-var-red (custom checkable-var)