html checkbox复选框更换背景,CSS3 点击改变背景色的自定义复选框(CheckBox)

CSS

语言：

CSSSCSS

确定

body {

padding: 3rem;

text-align: center;

font-family: sans-serif;

background: white;

}

h1 {

font-size: 2rem;

font-weight: 100;

margin-bottom: 0.5rem;

}

p {

margin-bottom: 2rem;

color: #bdc3c7;

font-size: 1.2rem;

font-weight: 100;

}

h2 {

text-transform: uppercase;

margin: 4rem 0 2rem 0;

}

input[type="checkbox"] {

display: none;

}

input[type="checkbox"] + label {

-webkit-transition: all 300ms ease;

transition: all 300ms ease;

font-size: 2rem;

cursor: pointer;

border-radius: 0.3rem;

background-color: #ecf0f1;

padding: 0.5rem 1rem;

display: inline-block;

}

input[type="checkbox"] + label i {

color: #bdc3c7;

}

input[type="checkbox"]:checked + label {

-webkit-transition: all 300ms ease;

transition: all 300ms ease;

background-color: #2ecc71;

}

input[type="checkbox"]:checked + label i {

color: white;

-webkit-animation: check 1s;

animation: check 1s;

}