有没有办法删除 textboxfor 的 input type="number" 中的增加/减少箭头？

Posted 2023-02-24

【中文标题】有没有办法删除 textboxfor 的 input type="number" 中的增加/减少箭头？

【英文标题】：Is there a way to remove the increase/decrease arrows in input type="number" for textboxfor?

【发布时间】：2018-07-04 17:03:25

【问题描述】：

有没有办法在输入（type="number"）中删除这些？

<input type="number" />

供用户输入他们的电话号码。

this

【问题讨论】：

由于你的标题包含TextBoxFor()，我只能假设你没有正确标记这个（应该是asp.net-mvc）。但是TextBoxFor() 永远不会添加type="number"。只有 EditorFor() 可以添加它，并且只有当属性是数字类型 - 电话号码属性永远不应该是数字类型 - 它需要是 string （为此使用 css 简直太疯狂了）

Can I hide the html5 number input’s spin box?的可能重复

现在你可以使用 youtu.be/alGcULGtiv8?t=630

【参考方案1】：

如果你愿意，这可以通过 CSS 来完成，

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

<input type="number" />

希望这会有所帮助！

【参考方案2】：

这些对于我的代码来说已经足够了。

.input[type=number]   
   &::-webkit-inner-spin-button display: none; 
   -moz-appearance:textfield;

【参考方案3】：

这对我有用：

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

谢谢:)

【讨论】：

欢迎来到 ***。请提供一些描述/推理，为什么您认为您提出的解决方案可能对 OP 有所帮助。

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。