input[type="checkbox"]:not(old).switch { opacity: 0; position: absolute; } input[type="checkbox"]:not(old).switch + label { position: relative; display: inline-block; cursor: pointer; height: 32px; padding: 0 0 0 64px; line-height: 32px; } input[type="checkbox"]:not(old).switch + label:before { content: ''; position: absolute; top: 0; left: 0; background: #d8eff0; border-radius: 32px; width: 52px; height: 32px; z-index: 600; } input[type="checkbox"]:not(old).switch + label:after { position: absolute; top: 2px; right: 0; bottom: 0; left: 2px; width: 28px; height: 28px; float: left; border-radius: 28px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); content: ' '; transition: all 0.3s ease; z-index: 700; background: #d8eff0; } input[type="checkbox"]:not(old).switch:checked + label:before { background: #00828d; } input[type="checkbox"]:not(old).switch:checked + label:after { left: 22px; } .field:not(old) { display: block; } .field:not(old) input[type=checkbox]:not(.switch), .field:not(old) input[type=radio]:not(.switch) { opacity: 0; position: absolute; } .field:not(old) input[type=checkbox]:not(.switch) + label, .field:not(old) input[type=radio]:not(.switch) + label { margin: .75rem 0 .75rem 1rem; position: relative; cursor: pointer; padding: 0 0 0 2.5rem; line-height: 1.7rem; } .field:not(old) input[type=checkbox]:not(.switch) + label:before, .field:not(old) input[type=radio]:not(.switch) + label:before { position: absolute; box-sizing: content-box; left: 0; content: ' '; width: 1.68rem; height: 1.68rem; border: 1px #2b585d solid; background: #d8eff0; color: #2b585d; font-size: 1.6rem; text-shadow: 1px 1px 1px rgba(11, 22, 23, 0.5); line-height: 1.5rem; text-align: center; } .field:not(old) input[type=checkbox]:not(.switch):checked + label:before { content: '✓'; } .field:not(old) input[type="radio"] + label:before { border-radius: 1.5rem; } .field:not(old) input[type="radio"]:checked + label:before { font-size: 1.25rem; content: '⬤'; } .field:not(old) input[type="radio"]:active + label, .field:not(old) input[type="radio"]:focus + label, .field:not(old) input[type="checkbox"]:active + label, .field:not(old) input[type="checkbox"]:focus + label { text-decoration: underline; }