演示代码
<!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));
-webkit-tap-highlight-color: transparent;
}
/** 开关-按钮 */
.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");
});
});
</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));
-webkit-tap-highlight-color: transparent;
}
/** 开关-按钮 */
.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="关闭状态文本" 开关为关闭状态时的文本
-->
效果
