Question

在数字输入上它有一个微调器，它有几个css属性，但我似乎找不到改变微调器本身大小的方法。我在谈论<input type='number'>。我试着找一些会改变尺寸的东西，但我找不到任何东西。我猜测的另一个问题是，每个操作系统上的每个浏览器都会有一个可能与spinner本身不同的实现。当我说微调器时，我正在谈论该图像的突出显示部分。
enter image description here

我无法使用JQuery UI微调器，因为我正在开发的大型应用程序使用不包含微调器的JQuery UI 1.8。升级会导致问题。

Answer 1

这个CSS似乎可以在Chrome中使用静态图像（旋转器）替换旋转器，然后在元素中控制图像的大小和位置，并在默认情况下使其不可见，直到用户将鼠标悬停在其上： / p>

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

Answer 2

不理想，但尝试使用CSS转换属性：

例如，

input[type=number]
{
    transform: scale(2);
}

这增加了整个输入的大小，但是这可能（与设置字体大小，行高，高度，宽度一起）可以产生所需的效果。

Answer 3

“微调器的大小”是一个含糊不清的概念，但<input type=number>元素似乎至少遵守width，height和字体属性设置。例如：

    <input type=number value=42 min=0 max=99
      style="font: 24pt Courier; width: 3ch; height: 3em">

这些设置是否有用以及是否有效是一个不同的问题。可以说，这些元素的实现应该是一个依赖于浏览器的漂亮，可用的小部件，适合于浏览条件，而不是作者应该搞砸的东西。但实际上，小部件很大程度上受CSS设置的影响，这在实践中可能是件好事，例如因为输入框在默认情况下往往太宽。（我们可以期望浏览器根据min和max值设置它，但目前这种情况不会发生。）风险是通过设置宽度，您可能会与实现发生冲突。上面的代码要求向上和向下箭头最多取一个字符的宽度，但这个猜测可能有一天会出错。

Answer 4

您可以创建一个带有两个按钮的输入字段，然后按照您喜欢的方式设置它们的样式。

<input type="text" name="something">
<span class="goUp"></span>
<span class="goDown"></span>

JS：

var inputField = $('input[name="something"]');
$('.goUp').click(function() {
    inputField.val(inputField.val() + 1);
});

$('.goDown').click(function() {
    inputField.val(inputField.val() - 1);
});

然后您还应该检查输入内部只有数字，这样您的+/- 1才能正常工作。

更改数字输入微调器的大小？

4 个答案: