Копировать код
<style> #rec0000000 .t-checkboxes__wrapper .t-checkbox__control{ display: inline-block; margin-right: 20px !important; }
#rec0000000 .t-checkbox__indicator { border: 1px solid #000; border-radius: 2px; opacity: 1; background-color: #cecece; } #rec0000000 .t-checkbox__indicator:after { border: solid #000; border-width: 0 2px 2px 0; left: 0px; top: 4px; position: relative; margin: 0px auto; }
#rec0000000 .t-checkbox__indicator:after { left: 50%; top: 50%; position: absolute; width: 10px; height: 10px; background-color: #000; border-radius: 0px; border: none; transform: translate(-50%, -50%) !important; }
#rec0000000 .t-checkbox__control .t-checkbox:checked~
.t-checkbox__indicator { opacity: 1; background-color: #000; border: 1px solid #000; } #rec0000000 .t-checkbox__control{ display: inline-block; margin-right: 20px !important; }
#rec0000000 label.t-checkbox__control { height: 28px; line-height: 28px; position: relative; border: 0px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator { display: inline-block; opacity: 1; border: 0px; height: 28px; width: 90px; box-sizing: border-box; position: relative; border-radius: 2px; background: #848484; transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control .t-checkbox__indicator:before { content: 'off'; display: inline-block; box-sizing: border-box; width: 45px; position: absolute; top: 0; left: 45px; text-transform: uppercase; text-align: center; color: #fff; font-size: 10px; line-height: 28px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator:after { display: inline-block; box-sizing: border-box; width: 44px; height: 26px; border-radius: 1px; border: 0px; position: absolute; top: 1px; left: 1px; z-index: 5; text-transform: uppercase; text-align: center; background: #fff; line-height: 26px; font-size: 10px; transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); transform: rotate(0deg); } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator { background-color: #70c767; opacity: 1; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator:before { content: 'on'; color: #fff; left: 0; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator:after { background: #fff; transform: translate3d(44px, 0, 0); } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) +
.t-checkbox__indicator:hover { cursor: pointer; } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) +
.t-checkbox__indicator:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } #rec0000000 label.t-checkbox__control { display: inline-block; margin-right: 20px !important; }
#rec0000000 .t-checkbox__control .t-checkbox__indicator { display: inline-block; opacity: 1; height: 28px; width: 56px; border: 1px solid #00000020; box-sizing: border-box; position: relative; border-radius: 20px; background: #EEEEEE; transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control .t-checkbox__indicator:before { box-sizing: border-box; width: 40px; position: absolute; top: 0; left: 45px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator:after { display: inline-block; box-sizing: border-box; width: 24px; height: 24px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); border-radius: 50%; border: solid #fff; position: absolute; top: 1px; left: 1px; background: white; color: #eee; transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); transform: rotate(0deg); } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator { background-color: limegreen; opacity: 1; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator:after { background: #70c767; transform: translate3d(28px, 0, 0); border: solid #fff; } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) +
.t-checkbox__indicator:hover { cursor: pointer; } #rec0000000 label.t-checkbox__control { display: inline-block; margin-right: 20px !important; }
#rec0000000 .t-checkbox__control .t-checkbox__indicator { height: 14px; opacity: 1; width: 36px; border: 0px; border-radius: 20px; background: #A0A0A0; transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control .t-checkbox__indicator:before { width: 20px; top: 0; left: 45px; } #rec0000000 .t-checkbox__control .t-checkbox__indicator:after { position: absolute; border: 0px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); display: inline-block; box-sizing: border-box; width: 20px; height: 20px; border-radius: 20px; top: -3px; left: 1px; background: #fff; color: #777; transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1); } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator { background-color: #8db5ff; opacity: 1; } #rec0000000 .t-checkbox__control input[type="checkbox"]:checked +
.t-checkbox__indicator:after { background: #1a73e8; transform: translate3d(16px, 0, 0); } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) +
.t-checkbox__indicator:hover { cursor: pointer; } #rec0000000 .t-checkbox__control input[type="checkbox"]:not(:disabled) +
.t-checkbox__indicator:hover:after { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } #rec0000000 .t-checkbox__control input[type="checkbox"]:disabled +
.t-checkbox__indicator { background: #0058ff; } </style>