📌  相关文章
📜  如何在Bootstrap 4中更改拨动开关的“选中”背景颜色？(1)

📅  最后修改于: 2023-12-03 15:08:51.689000             🧑  作者: Mango

如何在Bootstrap 4中更改拨动开关的“选中”背景颜色？

Bootstrap 4 是目前应用最广泛的前端开发框架之一，提供了非常丰富的组件和样式。其中之一是拨动开关(Toggle Switch)，可以用来开关任何东西，比如音频或视频，或者用来表示某种状态的开关。

在默认情况下，Bootstrap 4 的拨动开关有选中和未选中两种状态，并且选中状态具有特殊的背景颜色。但是，有时候我们需要自定义选中状态的背景颜色，这就需要进行一些自定义操作。

在本文中，我们将介绍如何在Bootstrap 4中更改拨动开关的“选中”背景颜色:

步骤
第一步：引入Bootstrap CSS
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
第二步：创建 HTML 元素

创建一个拨动开关的 HTML 元素，Bootstrap 4 提供了一个 .form-check 的 class，可以用来创建一个 label 和 input 的组合。

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="customSwitch1">
  <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
</div>
第三步：定义样式

使用 CSS 定义选中状态的背景颜色，可以使用 :checked 伪类选择器来定义，示例代码如下：

.form-check-input:checked {
  background-color: #17a2b8;
}
第四步：完整示例代码

完整的示例代码如下:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Toggle Switch Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.3/css/bootstrap.min.css">
  <style type="text/css">
    .form-check-input:checked {
      background-color: #17a2b8;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2 class="mt-3 mb-3">Bootstrap Toggle Switch Example</h2>
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="customSwitch1">
      <label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
总结

在 Bootstrap 4 中，我们可以通过调整样式来更改拨动开关的“选中”背景颜色。只需要定义一个 CSS 类，应用于选中状态的 input 元素即可。