修改el-switch的默认样式

在Vue.js中，`el-switch`组件是Element UI库中的一个开关元素，它通常用于二选一的选择。如果你想修改其默认的样式，可以利用CSS选择器针对`el-switch`及其内部元素进行定制。以下是基本步骤：

1. 首先，在你的CSS文件中，你可以通过`.el-switch`选择器来定位到`el-switch`组件。例如，你可以修改背景颜色、边框、文字颜色等：

.el-switch {
  /* 修改开关的默认背景颜色 */
  background-color: #ccc;
  
  /* 修改切换状态的颜色 */
  & input[type="checkbox"]:checked + .el-switch__core {
    background-color: #007aff;
  }
  
  /* 修改文字标签的颜色和字体 */
  & .el-switch__label {
    color: #333;
    font-size: 14px;
  }
}

2. 如果你想改变切换滑块的样式，可以添加 `.el-switch__core` 和 `.el-switch__handle` 选择器：

.el-switch__core {
  /* 滑块的颜色 */
  background-color: #fff;

  /* 滑块宽度 */
  width: 50px;
}

.el-switch__handle {
  /* 滑块的形状、大小和位置 */
  border-radius: 20px;
  height: 26px;
  left: calc(50% - 13px);
}

记得将上述样式添加到你的CSS文件中，并确保它们在你的应用中生效，通常是全局应用或者覆盖原有的主题样式。