相关疑难解决方法(0)

我想总是显示输入"数字"字段的向上/向下箭头.这可能吗？到目前为止,我没有运气...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

Chrome最近更新了其输入元素样式.我非常喜欢number输入类型,但是它们的新风格为我们提供了圆形按钮,这些按钮不能完全适合方形输入框.

我已经多次尝试让这些输入改变,但他们不会让步.从它input[type='number']自己到这些按钮:

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    border-radius: none !important; background: black; color: red;
}

input:-webkit-autofill { background: black; color: red; }

看起来他们可能根本无法改变.有任何人对此有经验吗？我知道有一种隐藏按钮的方法.理想情况下,我只想删除它们的边界半径.

有趣的是,填充似乎适用于这些按钮.我知道他们在听!

有没有一种方法可以通过使用CSS来增加数字输入框右侧的向上和向下箭头的大小？只是上下箭头，而不是整个输入框，或者至少是成比例的。请参阅以下示例：

.size-36 {
font-size: 36px;
}

.size-12 {
font-size: 12px;
}

<input type="number" class="size-36" value="2" min="0" max="10" step="1">
<input type="number" class="size-12" value="2" min="0" max="10" step="1">

<input type="number" value="2" min="0" max="10">

当前结果：

<input type="number"/>Mac中的箭头非常小,即使在Safari上也无法在Chrome和Firefox上使用.

在没有添加额外箭头图像等的情况下对它们进行样式化的正确方法是什么.请注意,我已经看过这些线程并且它没有解决问题: 样式输入类型=数字

这个线程出来的是这些: