.ui.checkbox { position: relative; display: inline-block; min-width: 1em; height: 1.25em; line-height: 1em; outline: 0; vertical-align: middle; } .ui.checkbox input { position: absolute; top: 0; right: 0; opacity: 0; outline: 0; } .ui.checkbox .box, .ui.checkbox label { cursor: pointer; padding-right: 2em; outline: 0; } .ui.checkbox .box:before, .ui.checkbox label:before { position: absolute; top: 0; line-height: 1; width: 1em; height: 1em; right: 0; content: ''; border-radius: 4px; background: #FFF; -webkit-transition: background-color .3s ease,-webkit-box-shadow .3s ease; transition: background-color .3s ease,box-shadow .3s ease; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.2); } .ui.checkbox .box:after, .ui.checkbox label:after { -ms-filter: "alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; background: transparent; border: .2em solid #333; border-top: 0; border-left: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .ui.checkbox .box:after, .ui.checkbox label:after { top: .275em; right: .2em; width: .45em; height: .15em; } .ui.checkbox label { color: rgba(0,0,0,.6); -webkit-transition: color .2s ease; transition: color .2s ease; } .ui.checkbox label:hover { color: rgba(0,0,0,.8); } .ui.checkbox input:focus+label { color: rgba(0,0,0,.8); } .ui.checkbox+label { cursor: pointer; opacity: .85; vertical-align: middle; } .ui.checkbox+label:hover { opacity: 1; } .ui.checkbox .box:hover::before, .ui.checkbox label:hover::before { -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3); box-shadow: 0 0 0 1px rgba(0,0,0,.3); } .ui.checkbox .box:active::before, .ui.checkbox label:active::before { background-color: #F5F5F5; } .ui.checkbox input:focus+.box:before, .ui.checkbox input:focus+label:before { -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3); box-shadow: 0 0 0 1px rgba(0,0,0,.3); } .ui.checkbox input:checked+.box:after, .ui.checkbox input:checked+label:after { -ms-filter: "alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } .ui.disabled.checkbox+.box:after, .ui.checkbox input[disabled]+.box:after, .ui.disabled.checkbox label, .ui.checkbox input[disabled]+label { opacity: .4; color: rgba(0,0,0,.3); } .ui.radio.checkbox .box:before, .ui.radio.checkbox label:before { min-width: 1em; height: 1em; border-radius: 500px; } .ui.radio.checkbox .box:after, .ui.radio.checkbox label:after { border: 0; top: .2em; right: .2em; width: .6em; height: .6em; background-color: #555; -webkit-transform: none; -ms-transform: none; transform: none; border-radius: 500px; } .ui.slider.checkbox { cursor: pointer; min-width: 3em; } .ui.slider.checkbox:after { position: absolute; top: .5em; right: 0; content: ''; width: 3em; height: 2px; background-color: rgba(0,0,0,.1); } .ui.slider.checkbox .box, .ui.slider.checkbox label { padding-right: 4em; } .ui.slider.checkbox .box:before, .ui.slider.checkbox label:before { cursor: pointer; display: block; position: absolute; top: -.25em; right: 0; z-index: 1; width: 1.5em; height: 1.5em; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; border-radius: 50rem; -webkit-transition: right .3s ease 0s; transition: right .3s ease 0s; } .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { opacity: 1; position: absolute; content: ''; top: .15em; right: 0; z-index: 2; margin-right: .375em; border: 0; width: .75em; height: .75em; border-radius: 50rem; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: background .3s ease 0s,right .3s ease 0s; transition: background .3s ease 0s,right .3s ease 0s; } .ui.slider.checkbox input:checked+.box:before, .ui.slider.checkbox input:checked+label:before, .ui.slider.checkbox input:checked+.box:after, .ui.slider.checkbox input:checked+label:after { right: 1.75em; } .ui.slider.checkbox .box:after, .ui.slider.checkbox label:after { background-color: #D95C5C; } .ui.slider.checkbox input:checked+.box:after, .ui.slider.checkbox input:checked+label:after { background-color: #89B84C; } .ui.toggle.checkbox { cursor: pointer; } .ui.toggle.checkbox .box, .ui.toggle.checkbox label { padding-right: 4em; } .ui.toggle.checkbox .box:before, .ui.toggle.checkbox label:before { cursor: pointer; display: block; position: absolute; content: ''; top: -.25em; right: 0; z-index: 1; background-color: #FFF; width: 3em; height: 1.5em; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset; border-radius: 50rem; } .ui.toggle.checkbox .box:after, .ui.toggle.checkbox label:after { opacity: 1; background-color: transparent; -webkit-box-shadow: none; box-shadow: none; content: ''; position: absolute; top: .15em; right: .5em; z-index: 2; border: 0; width: .75em; height: .75em; background-color: #D95C5C; border-radius: 50rem; -webkit-transition: background .3s ease 0s,right .3s ease 0s; transition: background .3s ease 0s,right .3s ease 0s; } .ui.toggle.checkbox:active .box:before, .ui.toggle.checkbox:active label:before { background-color: #F5F5F5; } .ui.toggle.checkbox input:checked+.box:after, .ui.toggle.checkbox input:checked+label:after { right: 1.75em; background-color: #89B84C; } .ui.checkbox { font-size: 1em; } .ui.large.checkbox { font-size: 1.25em; } .ui.huge.checkbox { font-size: 1.5em; }