我可以隐藏HTML5数字输入的旋转框吗？

JavaScript

卡卡西猪猪

2020-03-15

跨浏览器是否存在一种一致的方式来隐藏某些浏览器（例如Chrome）为数字类型的HTML输入呈现的新旋转框？我正在寻找一种CSS或JavaScript方法来防止出现向上/向下箭头。

<input id="test" type="number">

第1632篇《我可以隐藏HTML5数字输入的旋转框吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答
谷若汐 2020.03.15

I needed this to work

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield

The extra line of appearance: none was key to me.

小宇宙乐理查德 2020.03.15 

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

JinJin阿飞番长 2020.03.15

不是您要求的，但是我这样做是因为带有Spinboxes的WebKit中存在焦点错误：

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能会给您一个想法，以帮助您满足需要。

GOLEY前端 2020.03.15

我使用遇到了此问题，input[type="datetime-local"]类似于此问题。

而且我找到了一种克服此类问题的方法。

首先，您必须通过“ DevTools->设置->常规->元素->显示用户代理阴影DOM”打开chrome的shadow-root功能。

然后，您可以看到所有阴影DOM元素，例如对于<input type="number">，带有阴影DOM的完整元素为：

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

输入的阴影DOM [type =“ number”

根据这些信息，您可以起草一些CSS来隐藏不需要的元素，就像@Josh所说的那样。

前端LEYLEY 2020.03.15

Try using input type="tel" instead. It pops up a keyboard with numbers, and it doesn’t show spin boxes. It requires no JavaScript or CSS or plugins or anything else.

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android