在Chrome中为HTML5数字输入（旋转框）设置样式 [英] Styling HTML5 number input (spin box) in Chrome

问题描述

Chrome最近更新了其输入元素样式。我真的很喜欢数量输入类型，但他们的新风格给了我们四舍五入不适合整齐地成方形输入框按钮。

我尝试过许多尝试来改变这些输入，但是他们不会改变。从输入[类型='号'] 本身这些按钮：

<预类=郎CSS prettyprint-覆盖> input :: - webkit-outer-spin-button，input :: - webkit-inner-spin-button {
border-radius：none！important;背景：黑色;颜色：红色
}

输入：-webkit-autofill {background：black;颜色：红色}


似乎他们可能根本无法更改。有没有人有这方面的经验？ 我知道有办法隐藏的按钮。理想情况下，我只是想删除他们的边框半径。

有趣的是，padding似乎工作在这些按钮。我知道他们正在听！

解决方案

有几种方法可以实现。这里是一个纯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]。 -webkit-inner-spin-button {
 -webkit-appearance：none; 
背景：#FFF URL（数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT / sYhhKPiPT + F / LJgEsHv37v + EMGkmkuImoh2NoQAANlcun / q4OoYAAAAASUVORK5CYII =）不重复中心中心; 
 position：absolute; 
 top：0; 
 right：0; 
 bottom：0; 
 width：1em; 
 border-left：1px solid #BBB; 
 opacity：.5; / *显示旋转每个默认的按钮（浏览器> = 39）* / 
} 
  

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

只有剩下的问题是，您在可用性方面失去一点，因为您无法分别设置上下按钮的样式，您在单个按钮上没有：hover 和：focus 样式。

有趣！

编辑2015-01 -18：改进的答案反映Chrome中的更改= = 39。感谢@dtracers

Chrome recently updated its input element styles. I really like the number input type, but their new style gives us rounded buttons that don't fit neatly into square input boxes.

I've put in many attempts to get these inputs to change, but they won't budge. From the input[type='number'] itself to these buttons:

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; }

It seems they may not be able to change at all. Does anyone have experience with this? I know there's a way to hide the buttons. Ideally I just want to remove their border-radius.

Interestingly, padding seems to work on these buttons. I know they're listening!

解决方案

There are ways to accomplish that. Here's a pure CSS solution:
http://jsfiddle.net/Volker_E/WwfW9/

As you can see, the magic CSS property/value in your case is -webkit-appearance: none;. Through that the Spin Buttons lose their default appearance. And you're able to style in (nearly) every way you want to.

/* 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) */
}

I've added a Data URI image as background (therefor the small size), but you can add whatever image/CSS property you think is fitting your needs.

Only problem remaining is, that you're losing a bit on usability side, as you're not able to style the up and down button separately, and you don't have :hover and :focus styles on a single button.
That's simply not possible with current implementation in Chrome.

Have fun!

Edit 2015-01-18: Improved answer reflecting changes in Chrome >= v39. Thanks to @dtracers

这篇关于在Chrome中为HTML5数字输入（旋转框）设置样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！