Custom Style Select CSS, Checkboxes CSS and Radio Buttons

.container .control-group h1 Checkboxes label.control.control--checkbox First checkbox input(type='checkbox' checked) .control__indicator label.control.control--checkbox Second checkbox input(type='checkbox') .control__indicator label.control.control--checkbox Disabled input(type='checkbox' disabled) .control__indicator label.control.control--checkbox Disabled & checked input(type='checkbox' disabled checked) .control__indicator .control-group h1 Radio buttons label.control.control--radio First radio input(type='radio' name='radio' checked) .control__indicator label.control.control--radio Second radio input(type='radio' name='radio') .control__indicator label.control.control--radio Disabled input(type='radio' name='radio2' disabled) .control__indicator label.control.control--radio Disabled & checked input(type='radio' name='radio2' disabled checked) .control__indicator .control-group h1 Select boxes .select select option First select option Option option Option .select__arrow .select select option Second select option Option option Option .select__arrow .select select(disabled) option Disabled option Option option Option .select__arrow
$color--white = #FFFFFF $color--black = #000000 $color--light-grey = #E6E6E6 $color--grey = #CCCCCC $color--dark-grey = #7B7B7B $color--primary = #048BA8 $color--secondary = #0E647D html, body height 100% body background $color--light-grey font-family 'Source Sans Pro', sans-serif .container width 100% height 100% display flex flex-wrap wrap justify-content center align-items center h1 font-family 'Alegreya Sans', sans-serif font-weight 300 margin-top 0 // Box to contain form controls .control-group display inline-block vertical-align top background $color--white text-align left box-shadow 0 1px 2px rgba(0, 0, 0, 0.1) padding 30px width 200px height 210px margin 10px // Basic control styles .control display block position relative padding-left 30px margin-bottom 15px cursor pointer font-size 18px // Hide default browser input input position absolute z-index -1 opacity 0 // Custom control .control__indicator position absolute top 2px left 0 height 20px width 20px background $color--light-grey .control--radio & border-radius 50% // Makes radio buttons circlular // Hover and focus .control:hover input ~ &, .control input:focus ~ & background $color--grey // Checked .control input:checked ~ & background $color--primary // Hover when checked .control:hover input:not([disabled]):checked ~ &, .control input:checked:focus ~ & background $color--secondary // Hide default browser input .control input:disabled ~ & background $color--light-grey opacity 0.6 pointer-events none &:after content '' position absolute display none // Hide check .control input:checked ~ & display block // Show check // Checkbox tick .control--checkbox & left 8px top 4px width 3px height 8px border solid $color--white border-width 0 2px 2px 0 transform rotate(45deg) // Disabled tick colour .control--checkbox input:disabled ~ & border-color $color--dark-grey // Radio button inner circle .control--radio & left 7px top 7px height 6px width 6px border-radius 50% background $color--white // Disabled circle colour .control--radio input:disabled ~ & background $color--dark-grey .select position relative display inline-block margin-bottom 15px width 100% select display inline-block width 100% cursor pointer padding 10px 15px outline 0 border 0 border-radius 0 background $color--light-grey color $color--dark-grey appearance none -webkit-appearance none -moz-appearance none &::-ms-expand display none &:hover, &:focus color $color--black background $color--grey &:disabled opacity 0.5 pointer-events none .select__arrow position absolute top 16px right 15px width 0 height 0 pointer-events none border-style solid border-width 8px 5px 0 5px border-color $color--dark-grey transparent transparent transparent .select select:hover ~ & .select select:focus ~ & border-top-color $color--black .select select:disabled ~ & border-top-color $color--grey
Expand for more options Login