制作HTML输入数字的箭头更大更清晰

Question

而不是Is it possible to always show up/down arrows for input "number"?，我希望能够使箭头更大更清晰。

我现在所拥有的：

我需要让它们像这样大：

Answer 1

你可以将输入包装在元素中并对其进行样式设置

＆＃13;

＆＃13;

div {
  display: inline-block;
  position: Relative;
  border: 2px solid grey;
  border-radius: 10px;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before,
div:after {
  background: white;
  right: 0px;
  width: 30px;
  height: 20%;
  position: absolute;
  pointer-events: none;
}
div:before {
  content: '';
  bottom: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  background-position: center;
}
div:after {
  content: '';
  top: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  transform: rotate(180deg);
  background-position: center;
}
input {
  height: 80PX;
  font-size: 50px;
  outline: 0;
  border: 0;
}

＆＃13;

<div>
  <input type="number" value="10" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

另一种解决方案，即在浏览器和更多自定义选项之间提供一致性，将使用the JQuery UI spinner element。