javascript - 如何设置复选框按钮的样式使其看起来像线段

Question

This is what I am trying to achieve

我能够实现自定义复选框，但我无法显示默认灰色背景和动态蓝线。

在第一个例子中，只有一个点，蓝线从头到点显示。第二，它们之间会出现蓝线。

如果有任何想法和帮助，我将不胜感激。谢谢。

.wrapper {
width: 236px;

}

.container {
  display: inline-block;
  position: relative;
  margin-left: 12px; 
  margin-right: 12px;
  cursor: pointer;
  padding: 10px;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  position: absolute;
  top: 6;
  left: 6;
  height: 8px;
  width: 8px;
  background-color: #eee;
  border-radius: 50%;
}

.container:hover input ~ .checkmark {
  background-color: #ccc;
}

.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  top: 2px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
}

<div class="wrapper">

<label class="container">
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

<label class="container">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

<label class="container">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

</div>

感谢您的帮助。

Answer 1

我强烈建议使用 Range 输入类型，而不是对其进行硬编码。在 MDN Web Docs 上检查新的 HTML5 输入类型.

最合适的方案可以试试this plugin ，示例 21 正是您要找的，它不会花费您创建自定义 Range 输入类型的时间。另外，它兼容不同的浏览器，因此您不必担心兼容性问题。您所要做的就是更改其 CSS 以满足您的设计需求!

希望这可以帮助您在最短的时间内创建您实际需要的内容!