演示代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>custom_switch</title></head><style>/** 开关 */.custom_switch {--switch-padding: 3px;--btnSize: 20px;--animation: all 0.3s;display: inline-flex;align-items: center;padding: var(--switch-padding);background-color: #ccc;color: #fff;border-radius: calc(var(--btnSize) + var(--switch-padding) * 2);cursor: pointer;user-select: none;font-family: Helvetica;line-height: var(--btnSize);transition: var(--animation);position: relative;padding-left: calc(var(--btnSize) + var(--switch-padding));}/** 开关-按钮 */.custom_switch::before {content: "";width: var(--btnSize);height: var(--btnSize);background-color: #fff;border-radius: 50%;position: absolute;left: var(--switch-padding);transition: var(--animation);}/** 开关-文本 */.custom_switch::after {content: attr(data-inactive);padding: 0 5px;}/** 开关-激活 */.custom_switch.active {background-color: #5a76ff;padding-left: var(--switch-padding);padding-right: calc(var(--btnSize) + var(--switch-padding));}/** 开关-激活-按钮 */.custom_switch.active::before {left: calc(100% - var(--btnSize) - var(--switch-padding));}/** 开关-激活-文本 */.custom_switch.active::after {content: attr(data-active);}</style><body><div class="custom_switch" data-active="启用" data-inactive="禁用"></div><div class="custom_switch active" data-active="启用" data-inactive="不启用"></div></body><script>document.querySelectorAll(".custom_switch").forEach((item) => {item.addEventListener("click", () => {item.classList.toggle("active");});});// }, 1000);</script>
</html>
纯净样式
/** 开关 */
.custom_switch {--switch-padding: 3px;--btnSize: 20px;--animation: all 0.3s;display: inline-flex;align-items: center;padding: var(--switch-padding);background-color: #ccc;color: #fff;border-radius: calc(var(--btnSize) + var(--switch-padding) * 2);cursor: pointer;user-select: none;font-family: Helvetica;line-height: var(--btnSize);transition: var(--animation);position: relative;padding-left: calc(var(--btnSize) + var(--switch-padding));
}
/** 开关-按钮 */
.custom_switch::before {content: "";width: var(--btnSize);height: var(--btnSize);background-color: #fff;border-radius: 50%;position: absolute;left: var(--switch-padding);transition: var(--animation);
}
/** 开关-文本 */
.custom_switch::after {content: attr(data-inactive);padding: 0 5px;
}
/** 开关-激活 */
.custom_switch.active {background-color: #5a76ff;padding-left: var(--switch-padding);padding-right: calc(var(--btnSize) + var(--switch-padding));
}
/** 开关-激活-按钮 */
.custom_switch.active::before {left: calc(100% - var(--btnSize) - var(--switch-padding));
}
/** 开关-激活-文本 */
.custom_switch.active::after {content: attr(data-active);
}
使用方法
<div class="custom_switch" data-active="启用" data-inactive="禁用"></div>
<div class="custom_switch active" data-active="启用" data-inactive="不启用"></div>
<!--
默认开关为关闭状态，通过切换class切换状态
class="active" 开关为开启状态
data-active="开启状态文本" 开关为开启状态时的文本
data-inactive="关闭状态文本" 开关为关闭状态时的文本-->
效果
![[Windows] 数据恢复软件R-Studio 8.14.179623](https://attach.52pojie.cn/forum/202009/21/215839yppi5p3ifzxpyd7y.jpg)
