html5种状态,HTML5有三个状态的滑块开关控件

CSS

语言：

CSSSCSS

确定

.switch {

position: relative;

width: 125px;

height: 55px;

border-radius: 3px;

margin: 2px;

-webkit-transition: .25s ease;

transition: .25s ease;

}

.switch:not(.disabled) .slider {

cursor: pointer;

}

.switch[enabled="-1"] .slider {

cursor: auto;

}

.switch .slider {

position: absolute;

width: 52px;

height: 45px;

top: 5px;

left: 50%;

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

background-color: #F5F7FA;

border-radius: 2px;

-webkit-transition: .25s ease;

transition: .25s ease;

}

.switch .slider:before {

content: '';

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 3px;

height: 14px;

background-color: #E6E9ED;

box-shadow: 6px 0 0 0 #E6E9ED, -6px 0 0 0 #E6E9ED;

}

.switch .icon {

position: absolute;

top: 50%;

}

.switch .icon:before,

.switch .icon:after {

content: '';

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

-webkit-transition: .25s ease;

transition: .25s ease;

}

.switch .icon.tick {

left: 30px;

}

.switch .icon.tick:before {

width: 22px;

height: 6px;

-webkit-transform: translate(-25%, -50%) rotate(-45deg);

transform: translate(-25%, -50%) rotate(-45deg);

}

.switch .icon.tick:after {

width: 6px;

height: 14px;

-webkit-transform: translate(-100%, -30%) rotate(-45deg);

transform: translate(-100%, -30%) rotate(-45deg);

}

.switch .icon.cross {

right: 32px;

}

.switch .icon.cross:before {

width: 24px;

height: 6px;

-webkit-transform: translate(-50%, -50%) rotate(45deg);

transform: translate(-50%, -50%) rotate(45deg);

}

.switch .icon.cross:after {

width: 24px;

height: 6px;

-webkit-transform: translate(-50%, -50%) rotate(-45deg);

transform: translate(-50%, -50%) rotate(-45deg);

}

.switch.null {

background-color: #FFCE54;

}

.switch.null .slider {

left: calc(50% + 0px);

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

}

.switch.null .icon:before,

.switch.null .icon:after {

background-color: #FFCE54;

}

.switch.unchecked {

background-color: #D8334A;

}

.switch.unchecked .slider {

left: calc(0% + 5px);

-webkit-transform: translateX(0%);

transform: translateX(0%);

}

.switch.unchecked .icon:before,

.switch.unchecked .icon:after {

background-color: #BF263C;

}

.switch.checked {

background-color: #2ECC71;

}

.switch.checked .slider {

left: calc(100% - 5px);

-webkit-transform: translateX(-100%);

transform: translateX(-100%);

}

.switch.checked .icon:before,

.switch.checked .icon:after {

background-color: #2ABA66;

}

.switch.disabled {

background-color: #CCD1D9;

}

.switch.disabled .icon:before,

.switch.disabled .icon:after {

background-color: #CCD1D9;

}

.switch.disabled.checked .icon:before,

.switch.disabled.checked .icon:after,

.switch.disabled.unchecked .icon:before,

.switch.disabled.unchecked .icon:after {

background-color: #AAB2BD;

}

/**/

body {

font-family: "Merriweather";

}

body .panel {

border-radius: 5px;

border: 1px solid #E6E9ED;

padding: 20px;

}

body .panel h1,

body .panel h2,

body .panel h3,

body .panel h4,

body .panel h5,

body .panel h6,

body .panel .button {

margin: 0;

font-family: "Lato";

}

body .panel p {

margin: 4px 0;

}

body .panel code {

overflow: hidden;

border-radius: 4px;

}

body .panel code,

body .panel code p {

box-shadow: 0 0 0 4px #E6E9ED;

background-color: #E6E9ED;

font-family: "Source Code Pro";

font-size: .9em;

}

body .panel code[i="1"],

body .panel code p[i="1"] {

padding-left: 10px;

}

body .panel code[i="2"],

body .panel code p[i="2"] {

padding-left: 20px;

}

body .panel code[i="3"],

body .panel code p[i="3"] {

padding-left: 30px;

}

body .panel code[i="4"],

body .panel code p[i="4"] {

padding-left: 40px;

}

body .panel table {

width: 100%;

border-spacing: 0;

}

body .panel table tr th {

border-bottom: 2px solid #E6E9ED;

}

body .panel table tr > * {

width: 50%;

}

body .panel table .split td {

border-top: 1px solid #E6E9ED;

}

body .panel > .panel > * {

margin: 10px 0;

}

body .panel > .panel > *:first-child {

margin-top: 0px;

}

body .panel > .panel > *:last-child {

margin-bottom: 0px;

}

body .panel > .panel {

margin: 10px 0;

}

body .panel > .panel:first-child {

margin-top: 0px;

}

body .panel > .panel:last-child {

margin-bottom: 0px;

}

body .panel .button {

padding: 10px;

background-color: #2ECC71;

display: inline-block;

color: #F5F7FA;

border-radius: 3px;

cursor: pointer;

line-height: 18px;

}

body .panel .button > span {

min-width: 30px;

min-height: 19px;

background-color: #F5F7FA;

display: inline-block;

color: #2ECC71;

border-radius: 2px;

text-align: center;

padding: 0 3px;

}