制作HTML的上下箭头'；输入的数字要大得多，更干净

相反，我希望能够使上/下箭头更大、更干净

我现在所拥有的：

---

我需要像这样使它们更大：

您可以将输入和元素包装在一起，并对其进行样式设置

div{
显示：内联块；
位置：相对位置；
边框：2倍纯色灰色；
边界半径：10px；
溢出：隐藏；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
部门：之前，
部门：之后{
背景：白色；
右：0px；
宽度：30px；
身高：20%；
位置：绝对位置；
指针事件：无；
}
部门：以前{
内容：''；
底部：50%；
背景：url(http://cdn.flaticon.com/png/256/22205.png)没有重复的白色；
背景尺寸：20px；
背景位置：中心；
}
部门：之后{
内容：''；
最高：50%；
背景：url(http://cdn.flaticon.com/png/256/22205.png)没有重复的白色；
背景尺寸：20px；
变换：旋转（180度）；
背景位置：中心；
}
输入{
高度：80PX；
字体大小：50px；
大纲：0；
边界：0；
}

---

要实现这一点，您必须使用伪元素和一些

CSS3

技巧

创建三角形的步骤

操作输入数字微调器的步骤

input[type=number]::-webkit-inner-spin-button {
    /* your code*/
}

这是一个例子

输入{
颜色：#777；
宽度：2米；
字号：2em；
边界半径：10px；
边框：2个实心#ccc；
填充物：5px；
左侧填充：10px；
}
输入[类型=编号]：-webkit内部旋转按钮{
-webkit外观：无；
光标：指针；
显示：块；
宽度：10px；
文本对齐：居中；
位置：相对位置；
背景：透明；
}
输入[type=number]：-webkit内部旋转按钮：：之前，
输入[类型=编号]：-webkit内部旋转按钮：：之后{
内容：“；
位置：绝对位置；
右：0；
宽度：0；
身高：0；
左边框：7px实心透明；
右边框：7px实心透明；
边框底部：10px实心#777；
}
输入[类型=编号]：-webkit内部旋转按钮：：之前{
顶部：7px；
}
输入[类型=编号]：-webkit内部旋转按钮：：之后{
底部：7px；
变换：旋转（180度）；
}

---

另一个解决方案，提供浏览器之间的一致性和更多定制选项，将是使用。

您可以发布代码/演示吗？您使用的是什么浏览器？ChromeThank you@Itay告诉我关于Chrome的事似乎很好。但即使是在chrome中，箭头的容器也必须更宽，而其高度还行。这将带来额外的工作，但是转换呢？如果（输入）属性“font size:2em；”太大，则箭头将太近，请尝试更改（旋转按钮：：前/后）属性“top:7px；”和“bottom:7px；”