演示代碼
<!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="關閉狀態文本" 開關為關閉狀態時的文本
-->
效果
![]()
浙公網安備 33010602011771號