html - 使用 HTML/CSS 在水平尺上放置复选框

Question

我正在尝试创建一个基于网络的评分量表，其中包含七个复选框、两个文本标签和一条背景水平线。它看起来应该类似于 paper-based rating scale .另外，我想用一条短竖线标记中间的复选框。

因为复选框似乎很难设置样式，所以我在标签中用文本符号和边框替换了它们。我手动将这些复选框和垂直标尺放置在水平标尺上。结果在 Firefox 中看起来不错，但它似乎不适用于其他浏览器。在 Chrome、IE 和 Edge 中，垂直线不位于刻度的中心。此外，复选框符号未在 Chrome 中居中。

有更好的方法吗？

https://jsfiddle.net/tzuyya36/1/

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  font: 12px/16px sans-serif;
  text-align: center;
  vertical-align: middle;
  content: "\00a0";
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  position: absolute;
  border: 2px solid #8b8d8e;
  background: #ffffff;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
  display: inline-block;
}

input[type="radio"]:checked+label:before {
  content: "\26ab";
}

label.scale1 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: -8px;
}

label.scale2 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 82px;
}

label.scale3 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 172px;
}

label.scale4 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 262px;
}

label.scale5 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 352px;
}

label.scale6 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 442px;
}

label.scale7 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 532px;
}

div.scale {
  margin: 20px auto;
  width: 540px;
  height: 16px;
  position: relative;
}

div.leftLabel {
  text-align: right;
  width: 100px;
  position: absolute;
  left: -120px;
}

div.rightLabel {
  text-align: left;
  width: 100px;
  position: absolute;
  left: 560px;
}

hr.horizontal {
  width: 100%;
  position: absolute;
  border: 2px solid #8b8d8e;
}

hr.vertical {
  width: 30px;
  position: absolute;
  left: 257px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  border: 2px solid #8b8d8e;
}

<form>
  <div class="scale">
    <hr class="horizontal">
    <hr class="vertical">
    <div class="leftLabel">low</div>
    <input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
    <input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
    <input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
    <input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
    <input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
    <input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
    <input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
    <div class="rightLabel">high</div>
  </div>
</form>

Answer 1

与其尝试使用可能会根据操作系统、字体等改变外观的符号，我会使用另一个伪元素。这样您就可以完全控制外观。

要使垂直线居中，您可以使用 left: 50%，这样父级的宽度是无关紧要的，而 margin-left: -15px，宽度的一半元素的。

input[type="radio"] {
  display: none;
}

input[type="radio"]+label:before {
  font: 12px/16px sans-serif;
  text-align: center;
  vertical-align: middle;
  content: "\00a0";
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  position: absolute;
  border: 2px solid #8b8d8e;
  background: #ffffff;
  -webkit-border-radius: 999px;
  -moz-border-radius: 999px;
  border-radius: 999px;
  display: inline-block;
}

input[type="radio"]:checked+label:after {
  content: "";
  width: 12px;
  height: 12px;
  margin: 4px;
  position: absolute;
  background: #FF0000;
  border-radius: 50%;
}

label.scale1 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: -8px;
}

label.scale2 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 82px;
}

label.scale3 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 172px;
}

label.scale4 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 262px;
}

label.scale5 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 352px;
}

label.scale6 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 442px;
}

label.scale7 {
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 532px;
}

div.scale {
  margin: 20px auto;
  width: 540px;
  height: 16px;
  position: relative;
}

div.leftLabel {
  text-align: right;
  width: 100px;
  position: absolute;
  left: -120px;
}

div.rightLabel {
  text-align: left;
  width: 100px;
  position: absolute;
  left: 560px;
}

hr.horizontal {
  width: 100%;
  position: absolute;
  border: 2px solid #8b8d8e;
}

hr.vertical {
  height: 30px;
  position: absolute;
  top: -15px;
  left: 50%;
  border: 2px solid #8b8d8e;
}

<form>
  <div class="scale">
    <hr class="horizontal">
    <hr class="vertical">
    <div class="leftLabel">low</div>
    <input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
    <input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
    <input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
    <input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
    <input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
    <input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
    <input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
    <div class="rightLabel">high</div>
  </div>
</form>