输入类型箭头旋转按钮非标准

Posted

技术标签:

【中文标题】输入类型箭头旋转按钮非标准【英文标题】:input type arrow spin-button non-standard 【发布时间】:2018-01-24 11:16:24 【问题描述】:

我正在查看MDN for spinners(输入箭头type="number"),它说它是非标准的。我记得的方式是 MDN 也告诉你使用什么,但在这种情况下,它不是。 我的问题是,当我使用

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button 
  -webkit-appearance: none;
  -moz-appearance: textfield;
  margin: 0;

它适用于 chrome,但不适用于 Firefox。所以我猜测由于非标准它不适用,它的“标准”解决方法是什么?

【问题讨论】:

-moz- -webkit- 选择器中的供应商前缀!!我猜这是无效的 也许这会有所帮助:***.com/questions/43777047/… Hide Spinner in Input Number - Firefox 29的可能重复 【参考方案1】:

input[type=number]::-webkit-inner-spin-button 当浏览器为webkit 时,这将用作选择器,否则不会应用此选择器中的任何样式。

input[type=number] 
  -moz-appearance: textfield;
  margin: 0;


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button 
  -webkit-appearance: none;
<input type="number">

【讨论】:

以上是关于输入类型箭头旋转按钮非标准的主要内容,如果未能解决你的问题,请参考以下文章

使用数字键盘但没有箭头按钮的跨浏览器数字输入

Spinner 旋转器

使用标准输入识别箭头键

在 Chrome 中样式化 HTML5 数字输入(旋转框)

HTML输入类型编号 - 如何知道“步骤”功能触发更改事件?

修改手机搜狗输入法右下角的回车(左箭头)按钮,为“发送”按钮 in 微信