在 Chrome 中样式化 HTML5 数字输入（旋转框）

Posted 2023-04-18

【中文标题】在 Chrome 中样式化 HTML5 数字输入（旋转框）

【英文标题】：Styling HTML5 number input (spin box) in Chrome

【发布时间】：2014-02-11 13:32:17

【问题描述】：

Chrome 最近更新了其输入元素样式。我真的很喜欢number 输入类型，但它们的新样式为我们提供了圆形按钮，无法整齐地放入方形输入框。

我已经多次尝试改变这些输入，但它们不会让步。从input[type='number'] 本身到这些按钮：

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button 
    border-radius: none !important; background: black; color: red;


input:-webkit-autofill  background: black; color: red; 

似乎他们根本无法改变。有任何人对此有经验吗？ I know there's a way to hide the buttons. 理想情况下我只想删除它们的边界半径。

有趣的是，填充似乎对这些按钮起作用。我知道他们在听！

【参考方案1】：

有办法做到这一点。这是一个纯 CSS 解决方案：http://jsfiddle.net/Volker_E/WwfW9/

如您所见，在您的案例中，神奇的 CSS 属性/值是 -webkit-appearance: none;。 这样，旋转按钮就会失去其默认外观。而且您可以（几乎）以您想要的所有方式进行样式设置。

/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button, 
input[type="number"].mod::-webkit-inner-spin-button 
    -webkit-appearance: none;
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    border-left: 1px solid #bbb;
    opacity: .5; /* shows Spin Buttons per default (Chrome >= 39) */

我已将 Data URI 图像添加为 background（因此尺寸较小），但您可以添加您认为适合您需要的任何图像/CSS 属性。

剩下的唯一问题是，您在可用性方面有所损失，因为您无法单独设置向上和向下按钮的样式，并且您没有 :hover 和 :focus 样式单个按钮。 这在 Chrome 中的当前实现中根本不可能。

玩得开心！

编辑 2015-01-18：改进的答案反映了 Chrome >= v39 中的变化。感谢@dtracers

【讨论】：

我想知道有什么变化吗？当我查看 jsFiddle 时，我看到了默认的旋转按钮——但魔法风格的字段没有按钮。

你用哪个浏览器访问 jsFiddle？两个旋转按钮都在小提琴中的:hover 和:active 上可见。在 Chrome v36.0.1985.125 m 中它和以前一样。

我使用的是 Chrome 36.0.1985.143。是否有任何其他环境因素可能会影响显示？不过，这是一个很好的调查途径。我在 Safari 7.0.5 (9537.77.4) 上看到了魔法按钮。感谢您提醒我尝试其他浏览器。不过，奇怪的是我在 Chrome 上看不到 Magic。

我已经在其他几台计算机上试用了 Magic，我在所有这些计算机上都看到了 Magic。我将继续调查我的主要 Chrome 安装可能有什么不同。谢谢你的帮助。还有魔法。

它仍然无法正常工作。 s29.postimg.org/ua08smnkz/…这是我电脑上的样子