.customize-control-dt-switch { position: relative; } .customize-control-dt-switch .switch { border: none; margin-bottom: 1.5rem; outline: 0; padding: 0; user-select: none; border-radius: 3rem; } .customize-control-dt-switch label::after { background: #FFFFFF; content: ""; display: block; position: absolute; left: 5px; top: 5px; width: calc(.85rem + 10px); height: calc(.85rem + 10px); transition: all 0.25s ease-in-out; border-radius: 3rem; } .customize-control-dt-switch .switch-off, .customize-control-dt-switch .switch-on { opacity: 1; padding: 8px; font-size: 14px; line-height: 18px; } .customize-control-dt-switch .switch-off { color: #777; } .customize-control-dt-switch .switch-on { color: #fff; opacity: 0; } .customize-control-dt-switch input + label { margin-left: 0; margin-right: 0; } .customize-control-dt-switch label { background: #b4b9be; float: left; cursor: pointer; display: flex; justify-content: space-between; margin-bottom: 1rem; position: relative; transition: left 0.15s ease-out; border-radius: 3rem; } .customize-control-dt-switch input:checked + label { background: #0073aa; } .customize-control-dt-switch input:checked + label .switch-on { opacity: 1; } .customize-control-dt-switch input:checked + label .switch-off { opacity: 0; } .customize-control-dt-switch input:checked + label::after { left: auto; right: 5px; background: #ffffff; }