关闭数字输入框的上下箭头 | CSS-Tricks

Rob Cameron

# 2013年1月24日

有没有人知道如何除了关闭之外，还可以为微调按钮添加样式？我的文本框高度高于默认值，我想让微调器稍微大一点，更容易点击……

Jonathan Ankiewicz

评论永久链接# 2015年12月10日

是的，在margin:0的地方，你应该能够从那里为元素设置样式。

我正在寻找这个元素的文档。我想在移动设备上打开微调器。
Mukesh Shah

评论永久链接# 2017年2月7日

当我们将鼠标光标保持在获得焦点的元素上并滚动鼠标滚轮时，我们能否停止修改值？如果可以，请提供解决方案。

rahul chhalotre

# 2018年8月23日

这真的有效……

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

Tromgy

评论永久链接# 2019年6月20日
我发现增加line-height的值会使箭头按钮更大，而仅仅使用height属性会使框本身保持所需的大小
```
input {
  height: 30px;
  line-height: 45px;
}
```

Carlos

# 2013年8月16日

谢谢！

Theo

# 2013年9月4日

你也可以使用:before和:after来根据你的喜好设置按钮的样式

这是一个非常简单的例子和一个示例（也包括一个带样式的搜索输入框）

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
    font-family:monospace;
    line-height:
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}

Roger Ramos

评论永久链接# 2015年5月8日

太棒了！
Theo

评论永久链接# 2016年12月27日

这个在Chrome中有一段时间失效了。看起来你不再能够向这些选择器添加伪元素了，这很可惜，因为只有一个选择器可以同时控制上下两个按钮

Saeid

# 2013年10月11日

使用jQuery禁用鼠标滚轮

$(':input[type=number]').on('mousewheel', function(e){
    $(this).blur(); 
});

Rhys

评论永久链接# 2014年5月26日
不要模糊它，只需阻止事件。在鼠标滚轮上失去焦点是一种糟糕的体验。
```
$(':input[type=number]').on('mousewheel', function(e){
    e.preventDefault();
});
```
Rhys

评论永久链接# 2014年5月26日

也就是说，一种糟糕的体验
Mig

评论永久链接# 2016年3月4日

为什么要模糊输入框？这对用户来说多么烦人。只需阻止事件触发。

Tom

# 2013年10月12日

如何反过来操作：将-webkit-textfield-decoration-container设置为只读，但将按钮设置为启用？

Jason

# 2014年3月28日

如何使用AngularJS或HTML5（干净地）禁用滚动？我一直在查看文档，但似乎找不到任何内容……我曾短暂地对HTML5规范中的number印象深刻，但后来我发现了这个错误。 :(

Rocky S

评论永久链接# 2014年6月8日

嗨，

你找到解决方法了吗？如何使用Angular JS阻止它？请告诉我是否有任何方法？

谢谢，
Rocky

Bruno

# 2014年6月18日

你可以编写一个这样的指令

mod.directive('inputNumber', function () {
    return {
      restrict: 'A',
      link : function (scope, $element) {
        $element.on('focus', function () {
          angular.element(this).on('mousewheel', function (e) {
            e.preventDefault();
          });
        });
        $element.on('blur', function () {
          angular.element(this).off('mousewheel');
        });
      }
    };
  });

Stephan

# 2014年4月29日

是否有适用于Firefox 29的解决方案？

Stephan

# 2014年4月29日

好的，这是Firefox 29的解决方案

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

safwan

评论永久链接# 2014年11月22日

谢谢，我一直在寻找一种无需使用JavaScript且适用于Firefox的方法
David

评论永久链接# 2015年2月16日

不错的修复！
[email protected]

评论永久链接# 2015年12月21日

但这违背了将输入限制为数字的目的哈哈。
Sang

评论永久链接# 2016年1月5日

太棒了！谢谢。

John

# 2014年5月1日

感谢FF 29的解决方案。

Anthony Hortin

# 2014年5月4日

啊哈，不错！感谢FF 29的修复@Stephan！这太完美了！

mike

# 2014年5月12日

确实不错，Stephan。谢谢！

Don

# 2014年5月16日

有没有办法让一些数字输入框带有微调器，而另一些没有？

我正在尝试用类名标记某些输入框。

Pavel

# 2014年5月23日

@Don
input[type=number].input-number–noSpinners { -moz-appearance: textfield; }
input[type=number].input-number–noSpinners::-webkit-inner-spin-button,
input[type=number].input-number–noSpinners::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

将“input-number–noSpinners”类名添加到你想要没有微调器的输入框中。

David A.

评论永久链接# 2017年6月2日

谢谢。真的帮了大忙，而且完美运行
Shankar Mahadevan

评论永久链接# 2017年11月20日

谢谢。运行完美(y)

Don

# 2014年5月23日

@Pavel

谢谢，这有效！

eeklipzz

# 2014年6月17日

不确定对于这篇文章来说，在这一点上或任何事情是否重要，但我刚刚完成了一些关于微调器小部件所用名称的研究。有机会的时候看看。如果其他用户正在研究实现此功能的最佳方法，他们可能会发现这些信息很有用……

“数字微调器”是这个的最佳名称吗？
http://uxfindings.blogspot.com/2014/06/is-numeric-spinner-best-name-for-this.html

Andres

# 2014年9月12日

这在Opera Mobile上不起作用，它坚持显示烦人的微调器按钮。

Mike Kormendy

评论永久链接# 2016年7月7日

你考虑Opera Mobile本身就很烦人。

Jacob

# 2014年9月13日

喜欢Bruno的建议，但我想让它默认应用于所有数字输入元素，所以我稍微修改了一下。使用以下代码，鼠标滚轮会自动禁用（对于数字输入），无需任何额外的HTML！

module.directive('input',function() {
    return {
        restrict: 'E',
        scope: {
            type: '@'
        },
        link : function (scope, $element) {
            if (scope.type == 'number') {
                $element.on('focus', function () {
                    angular.element(this).on('mousewheel', function (e) {
                        e.preventDefault();
                    });
                });
                $element.on('blur', function () {
                    angular.element(this).off('mousewheel');
                });
            }
        }
    }
});

Simon Blackwell

评论永久链接# 2014年10月16日

如果你希望某些字段有微调器，而另一些没有，由于对于微调器来说，使用step="0"毫无意义，你可以这样做

input[step="0"]::-webkit-inner-spin-button { -webkit-appearance: none;}

任何step为0的输入字段都不会出现微调器，其余字段则会。
bruce

评论永久链接# 2015年1月13日

太棒了，谢谢。

Lalaina Pinard

# 2014年10月22日

谢谢Simon！太棒了。
还有一件事，我们不能设置这些微调器的样式吗？比如设置更大的高度和宽度？

sana

评论永久链接# 2017年8月27日

我用填充使它更大。

Nikhil

# 2014年11月1日

@Bruno 和 Jacob：感谢您的建议。我也想禁用相同的上下键。我该如何操作？

Jacob

# 2014年11月2日

@Nikhil，不确定使用数字输入是否可行（至少根据我的研究）。使用文本输入怎么样？如果您想要数字输入，以便基于触摸的设备会调出数字键盘，您可能需要尝试使用两个输入字段（一个“数字”和一个“文本”），然后使用 JavaScript 或 CSS 仅显示当前设备上具有所需功能的那个。

Liam McArthur

# 2014年11月19日

这是一个适用于 Firefox 和其他基于 -moz 的浏览器的解决方案

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

Eidel91

# 2014年11月27日

@Pavel，@Liam McArthur

我尝试了您的解决方案，但它不起作用……使用 FF 32、HTML5、cshtml……

-webkit-appearance 未被识别……

这个“-moz-appearance: textfield;” 可以，但我失去了对特定类型数字的控制……

Eidel91

# 2014年11月27日

并且：：-webkit-inner-spin-button 在 css 的选择中不存在……

网站管理员

# 2014年12月18日

最初发布的代码在 FireFox 中不起作用。它在 Chrome 和 Opera 中有效。FireFox 显示了微调器，但没有将其调整到指定的框高度。C 和 O 则可以。尚未在 Windows 9+ 中测试过。为什么要绕过它并在上面浪费时间？只需等待 FireFox 赶上即可。在任何时候都公开/显示特定浏览器的缺陷，而不是尝试修复它。如今，它们都很快就能弥补自己的缺陷。2014年12月18日。

max

# 2015年4月8日

它在 firefox 上不起作用。对此有什么想法吗？

sanjeev

# 2015年5月21日

酷！

daub

# 2015年6月11日

在 PC 上的 FF 38.0.6 中不起作用

Adrian

# 2015年9月15日

如果始终希望显示增量而不是在悬停时显示怎么办？

Scott

评论永久链接# 2016年6月15日

我相信您指的是 Chrome 的行为？我也想让微调器始终可见，但还没有找到方法。

willem

# 2016年3月10日

任何关于如何将其分配给特定数字 id=“mynumberfield” 的提示都将非常棒！

Ricky

# 2016年4月3日

试试

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

Ashu

# 2016年4月14日

这在 FF、Opera 中不起作用，
如果我使用
input[type=number] {
-moz-appearance: textfield;
}
这会失去对特定类型数字的控制。请告诉我 FF 和 Opera 的解决方案

rami

评论永久链接# 2016年4月17日

嗨，Ashu

我们可以使用
input[type=number] {
-moz-appearance: textfield;
}
这个
或者请参考此链接——http://exisweb.net/css-input-number-firefox——它可能会有帮助……

rami

# 2016年4月17日

firefox 不支持 webkit appearance

Dev

评论永久链接# 2016年4月17日

嗨，Rami，

您可以参考此解决方案

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

或者请参考此链接——http://exisweb.net/css-input-number-firefox——它可能会有帮助……

谢谢

rub

# 2016年5月2日

此帖子应更新为

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

rub

# 2016年5月2日

哎呀……

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

Scott

评论永久链接# 2016年6月15日

在我的 Chrome v51 中，-webkit-appearance:none; 似乎不再起作用。我改用了 -webkit-appearance:textfield;。

Akash

# 2016年7月27日

有时我需要这个微调器，有没有办法为这段代码创建一个类，请帮忙

MD.Riyaz

# 2016年12月10日

适用于 Firefox

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

Deepal

# 2017年10月2日

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

它可以工作，但我不想在字段中输入任何文本。那么我该怎么办。这不是完美的解决方案。

Sand Of Vega

# 2018年2月8日

非常感谢。这非常有帮助。 :)

limecliq

# 2018年5月10日

谢谢这个。我很高兴找到一个解决方案。在某些时候，这些微调器可能非常不受欢迎。很高兴知道我始终可以切换其开/关状态

Raviraj

# 2019年2月19日

它在 Mozilla 中不起作用

Geoff Graham

评论永久链接# 2019年2月19日

请注意，文本指出此代码段适用于 WebKit 浏览器。Firefox 需要不同的解决方案。

Vadim

# 2019年4月21日

input {
  -moz-appearance: textfield;
}

Naveen Kumar

# 2019年5月23日

它像专业人士一样工作，非常感谢。

Ctibor

# 2019年8月26日

在https://css-tricks.org.cn/snippets/css/turn-off-number-input-spinners/上有一个不完整的解决方案
适用于 Chrome，但对于 Firefox，您需要包含

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

以使其工作
鸣谢：https://stackoverflow.com/a/23374725/861615

Alireza

# 2019年8月31日

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

对于 firefox

cejota

# 2019年8月31日

优秀！但仅适用于 Chrome，有没有办法在 Mozilla 中做到这一点？

Tejashree

# 2019年9月10日

要禁用 Chrome 和 Firefox 的滚动选项，您可以使用以下 js 代码

$(‘:input[type=number]’).on(‘wheel’, function (e) { $(this).blur(); });

Payam Shahidi

# 2019年9月13日

在 Firefox (69.0 (64 位)) 上不起作用

Eduard Maura i Puig

# 2019年10月23日

对于 Firefox，您需要添加

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

Savannah

# 2020年6月5日

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

Yumarx

# 2020年7月13日

$(document).on(“wheel”, “input[type=number]”, function (e) {
$(this).blur();
});

Emmie

# 2020年12月2日

我不确定 margin: 0 是为了什么，如果不使用它，我确实看不到任何区别。除非重置边距，否则微调器是否会更改输入元素的大小？

也许是因为我使用的 CSS 规范化，所以我看不到区别。

Abdul Mutal

# 2021年6月18日

/* Chrome、Safari、Edge、Opera */
input::-webkit-outer-spin-button，
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

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

评论

发表评论 取消回复

发表评论取消回复