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

Question

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

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

备注：百分比可按5%递增/递减

Answer 1

您可以使用<input type="number"> 元素、<label> 元素、css :before、:after、input 事件来处理对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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select id="select1">
    <option value="abc">abc</option>
  </select>
  <label for="up"></label><input id="input" type="number" min="0" max="100" step="5" value="0"><label for="down"></label>
</div>
<script>
</script>