样式Dom
复选框
scss
input[type="checkbox"]{
/* 宽高 */
--checkbox-width: 24px;
/* 边框颜色 */
--checkbox-border-color: #cacaca;
/* 激活图标颜色 */
--checkbox-active-color: #ffffff;
/* 激活背景颜色 */
--checkbox-active-background: #0284c7;
/* 获取焦点的阴影颜色 */
--checkbox-focus-shadow: rgba(32, 107, 196, 0.25);
/* 基本样式 */
position: relative;
width: var(--checkbox-width);
height: var(--checkbox-width);
border: 1px solid var(--checkbox-border-color);
vertical-align: middle;
/* 移除原生外观 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 25%;
cursor: pointer;
transition: all 0.15s ease-in-out;
/* 禁用所有触摸手势 */
touch-action: none;
/* 禁用 Safari 原生的触摸高亮 */
-webkit-tap-highlight-color: transparent;
/* 激活状态 */
&:checked{
background-color: var(--checkbox-active-background);
border-color: transparent;
/* 字体图标 */
&::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
background-color: var(--checkbox-active-color);
mask-repeat: no-repeat;
mask-size: var(--checkbox-width);
mask-position: center center;
}
}
/* 获取焦点 */
&:focus{
box-shadow: 0 0 0 calc(var(--checkbox-width) * 0.21875) var(--checkbox-focus-shadow);
}
}使用：
html
<input type="checkbox" />开关滑块
scss
/* Switch开关样式 */
button.switch {
/* 宽 */
--width: 40px;
/* 高 */
--height: 20px;
/* 边框颜色 */
--switch-border-color: #7a7a7a;
/* 背景颜色 */
--switch-background: transparent;
/* 左边icon图标颜色 */
--switch-left-icon-color: #000;
/* 右边icon图标颜色 */
--switch-right-icon-color: #fff;
/* 移除元素在获得焦点（focus）时浏览器默认显示的轮廓线 */
outline: none;
/* 移除原生外观 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: var(--width);
height: var(--height);
border-radius: calc(var(--height) / 2);
transition: border-color 0.3s;
box-sizing: border-box;
border: 1px solid var(--switch-border-color);
background-color: var(--switch-background);
cursor: pointer;
/* 禁用所有触摸手势 */
touch-action: none;
/* 禁用 Safari 原生的触摸高亮 */
-webkit-tap-highlight-color: transparent;
/* 禁止用户选择文本 */
/* Safari/Chrome/旧WebKit */
-webkit-user-select: none;
/* 旧 Firefox */
-moz-user-select: none;
/* IE10+/旧Edge */
-ms-user-select: none;
/* 标准，现代浏览器 */
user-select: none;
}
/* 基本状态 */
button.switch::after {
position: absolute;
top: 2px;
left: 2px;
content: "";
width: calc((var(--width) / 2) - 6px);
height: calc(var(--height) - 6px);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M510 192a32 32 0 0 1-32-32V80a32 32 0 1 1 64 0v80a32 32 0 0 1-32 32z m224.864 93.136a32 32 0 0 1 0-45.248l56.576-56.576a32 32 0 1 1 45.248 45.248l-56.56 56.56a32 32 0 0 1-45.264 0.016z m93.136 224.864a32 32 0 0 1 32-32h80a32 32 0 1 1 0 64h-80a32 32 0 0 1-32-32z m-93.136 224.864a32 32 0 0 1 45.248 0l56.56 56.56a32 32 0 1 1-45.248 45.248l-56.576-56.56a32 32 0 0 1 0.016-45.248zM510 828a32 32 0 0 1 32 32v80a32 32 0 1 1-64 0v-80a32 32 0 0 1 32-32z m-224.864-93.136a32 32 0 0 1 0 45.248l-56.56 56.56a32 32 0 0 1-45.248-45.248l56.576-56.56a32 32 0 0 1 45.232 0zM192 510a32 32 0 0 1-32 32H80a32 32 0 1 1 0-64h80a32 32 0 0 1 32 32z m93.136-224.864a32 32 0 0 1-45.248 0l-56.576-56.56a32 32 0 0 1 45.248-45.248l56.56 56.576a32 32 0 0 1 0.016 45.232zM510 272c132.544 0 240 107.456 240 240 0 132.544-107.456 240-240 240-132.544 0-240-107.456-240-240 0-132.544 107.456-240 240-240z m0 64c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z' fill='%23000000'/%3E%3C/svg%3E");
background-color: var(--switch-left-icon-color);
mask-size: calc(var(--height) - 6px);
mask-repeat: no-repeat;
mask-position: left center;
transition: 0.4s;
}
/* 被选中时：伪元素显示下面样式 位置发生变化 */
button.switch.checkbox::after {
content: "";
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M532 121.056C470.88 169.408 432 244 432 328c0 145.792 118.208 264 264 264 83.904 0 158.656-39.136 207.008-100.16 0 0 8.8-11.84 24.992-11.84 17.664 0 32 14.336 32 32-0.128 247.552-200.672 448-448 448-247.424 0-448-200.576-448-448S264.576 64 512 64c17.696 0.032 32 14.336 32 32 0 16.736-12 25.056-12 25.056z'/%3E%3C/svg%3E");
background-color: var(--switch-right-icon-color);
left: calc(var(--width) / 2);
mask-position: right center;
top: 2px;
}使用：
根据添加、删除.checkbox修改状态。
html
<button class="switch checkbox"></button>输入框
scss
input.customInput {
/* 输入框宽度 */
--customInput-width: 100%;
/* 输入框高度 */
--customInput-height: 34px;
/* 输入框字体大小 */
--customInput-size: 14px;
/* 输入框字体颜色 */
--customInput-color: #000;
/* 输入背景颜色 */
--customInput-background: transparent;
/* 输入框边框颜色 */
--customInput-border-color: #dcdfe6;
/* 获取焦点时的边框颜色 */
--customInput-focus-border-color: #409eff;
/* 获取焦点时的阴影边框颜色 */
--customInput-focus-shadow-color: rgba(24, 144, 255, 0.2);
/* 占位符字体颜色 */
--customInput-placeholder-color: #606266;
/* 基本样式 */
box-sizing: border-box;
width: var(--customInput-width);
height: var(--customInput-height);
padding: 0 8px;
font-size: var(--customInput-size);
color: var(--customInput-color);
border: 1px solid var(--customInput-border-color);
border-radius: calc(6px * var(--customInput-height) / 34px);
outline: none;
background: var(--customInput-background);
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s ease-in-out, box-shadow 0.3s ease-in-out;
/* 占位符 */
&::placeholder{
transition: padding-left 0.19s ease-in-out;
color: var(--customInput-placeholder-color);
font-size: calc(var(--customInput-size) - 2px);
}
/* 获取焦点 */
&:focus {
border: 1px solid var(--customInput-focus-border-color);
&::placeholder{
padding-left: 6px;
}
}
/* 类名“.focus”存在时，获取焦点时的阴影边框 */
&.focus{
&:focus {
box-shadow: 0 0 0 2px var(--customInput-focus-shadow-color);
}
}
}使用：
添加.focus时，输入框获取焦点会有阴影状态。
html
<input type="text" class="customInput focus" />