在选择字段中实现向下箭头的最佳实践

Question

在网页的select元素中设置百分比向上/向下滑块/选择器的最佳方法是这样的：

1. 具有专用背景的选择列表。如果是，如何检测到用户点击了向上或向下箭头？
2. 为每个百分比上/下项目构建一个包含三行/一列的表格，其中：a）第1行=向上箭头，b）第2行=选择选项列表，c）第3行=向下箭头
3. 其他一些解决方案？

备注：百分比可以逐步增加/减少5％

Answer 1

您可以使用<input type="number">元素，<label>元素，css :before，:after，input事件来处理点击{{1 }}元素，用于处理input type="number"元素点击的自定义事件。

label

$("label[for]").on("click", function(event) {
  $("#input").val(function(_, n) {
    return event.target.htmlFor === "up" 
           ? +n < +this.max ? +n + 5 : n 
           : +n > +this.min ? +n - 5 : n;
  }).trigger("arrow")
});

$("#input").on("input arrow", function(event) {
  if (event.isTrigger) {
    console.log("arrow");
  } else {
    console.log("input")
  }
  console.log(this.value + "%")
});

@charset "UTF-8";
 div {
  position: relative;
  top: 50px;
}
input[type="number"] {
  width: 45px;
  outline: thin solid navy;
}
label[for="up"]:nth-of-type(1):before {
  content: "\25B2";
  top: -20px !important;
  left: 32.5px;
  position: relative;
}
label[for="down"]:before {
  content: "\25BC";
  position: relative;
  top: 20px !important;
  left: -32.5px;
}
label[for="down"]:after {
  content: "%";
  position: relative;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  left: -10px;
}