📜  如何禁用数字输入中的箭头?

📅  最后修改于: 2021-10-29 04:46:26             🧑  作者: Mango

在本文中,我们将看到如何禁用数字输入中的箭头。

请参阅下面的图像,第一张图像具有默认箭头,第二张图像没有箭头。

默认输入框(有箭头)

没有箭头的输入框。

为此,我们使用以下语法:

方法一:

对于 chrome、Safari、Edge、Opera:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

对于火狐:

input[type=number]{
    -moz-appearance: textfield;
}

例子:

HTML


  

    

  

    

      GeeksforGeeks     

       

        How to disable arrows from         Number input using CSS?     

          


HTML


  

    

GeeksforGeeks

       

        Disable arrows from number input     

        


输出 :

方法2:这种方法简单而强大。使用inputmode=”numeric”属性 你可以找到一个没有箭头的输入框。较旧的浏览器可能不支持此功能,例如 Internet Explorer 和 Safari,但大多数现代浏览器,如 Chrome、Firefox、Edge、Opera 都支持此属性。此属性的主要目的是在移动设备中提供数字输入界面。

例子 :

HTML



  

    

GeeksforGeeks

       

        Disable arrows from number input     

        

输出 :