Skip to content

Instantly share code, notes, and snippets.

@Security2431

Security2431/Checkbox custom

Last active August 23, 2017 07:34
Show Gist options
  • Save Security2431/5c76931c5226a17616b6a5f53d971230 to your computer and use it in GitHub Desktop.
Save Security2431/5c76931c5226a17616b6a5f53d971230 to your computer and use it in GitHub Desktop.
Download ZIP
radio/checkbox with custom styles
Raw
Checkbox custom
<div class="checkbox-btn">
<input class="checkbox-btn__control" type="radio" name="package" id="package-1">
<label class="checkbox-btn__box" for="package-1">btn 1</label>
</div>
Raw
css
.checkbox-btn__control {
display: none
}
.checkbox-btn__control:checked+.checkbox-btn__box {
background: linear-gradient(to bottom, #ffb619 0%, #efa209 100%)
}
Raw
pug
.checkbox-btn
input#package-1.checkbox-btn__control(type='radio', name='package')
label.checkbox-btn__box(for='package-1') btn 1
Raw
sass
.checkbox-btn
&__control
display: none
&:checked
&+ .checkbox-btn__box
background: linear-gradient(to bottom, #ffb619 0%, #efa209 100%)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment