如何为开关的边缘添加颜色

<input type="checkbox" id="toggle-switch">
<label for="toggle-switch"></label>

#toggle-switch {
  display: none; /* 隐藏原始的开关 */
}

#toggle-switch + label {
  display: inline-block;
  width: 60px;
  height: 30px;
  background-color: #ccc; /* 设置默认的边缘颜色 */
  border-radius: 15px;
  position: relative;
  cursor: pointer;
}

#toggle-switch:checked + label {
  background-color: #00ff00; /* 设置选中状态下的边缘颜色 */
}

#toggle-switch + label::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  background-color: #fff; /* 设置边缘的颜色 */
  border-radius: 50%;
  transition: 0.4s; /* 添加过渡效果 */
}

#toggle-switch:checked + label::before {
  transform: translateX(30px); /* 将边缘移动到开关的右侧 */
}