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

Question

在数字输入框中，它有一个微调器（spinner），有几个CSS属性，但我似乎找不到改变微调器大小的方法。 我指的是<input type ='number'>。 我尝试找到可以改变大小的东西，但一直没有找到。 另一个问题是，可能每个操作系统上的每个浏览器都会有潜在不同的微调器实现。 当我说微调器时，我指的是此图像中突出显示的部分。
由于我正在开发的大型应用程序使用的是未包括微调器的JQuery UI 1.8，因此我无法使用JQuery UI微调器。 升级会引起问题。

- Johnston

---

我也没有找到如何改变旋转器本身的大小。即使这不是显式可配置的，你会认为它至少会自动缩放（与输入的高度、行高和/或字体大小成比例）。现在，当你把其他所有东西都变大时，旋转器的大小仍然很小，看起来很荒谬。 - Lonnie Best

Answer 1

不是理想的解决方案，但可以尝试使用CSS transform属性进行调整：

例如：

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

这会增加整个输入框的大小，但是也许可以通过设置字体大小、行高、高度和宽度来达到所需效果。

- Lonnie Best

---

这确实可以工作，但它使用最近邻插值来缩放按钮 - 甚至不是双线性的！ - 所以看起来很糟糕。 - Timmmm

这很好笑。是啊，你可能需要调整大小、字体等来适应它的邻居。嗯，反正这只是一个笨拙的想法。 - Lonnie Best

@Timmmm：如果我尝试这个，我可能会将其包装在一个内联块中，其中不可见的溢出（来自缩放）被截断。你基本上将疯狂的东西封装成更易管理的东西。我不指望你理解我刚才说的话，但我也没有时间进一步解释。 - Lonnie Best

我理解你的意思，但旋转器的整个意义在于它可以轻松地提供漂亮（理论上）的按钮。如果你只是要粗略地隐藏它们，那么你不如使用<input type="text" pattern="\d+">和单独的按钮，就像@progsource建议的那样。 - Timmmm

如果有人有时间将此报告为错误（对于每个存在问题的浏览器），请在此处发布链接，我会前往并发表意见。 - Lonnie Best

Answer 2

这个CSS似乎可以在Chrome中工作，它用一个静态图像（一个旋转的图案）替换了旋转符号，并控制图像在元素内的大小和位置，并将其默认隐藏直到用户将鼠标悬停在上面。

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

- Jawa

Answer 3

普通的HTML...

不需要任何库或图片。

HTML

<!--   Score Control Container -->
<div class = "Score-Control">
  <div class = "Score-Value-Container">
    <div id="RoundScore" class="Score-Value">
      10
    </div>

  </div>

  <div class = "Score-UpDown">
    <div class = "Score-Button-Container">
      <div class = "Score-Button " onclick="IncrementScore();"> 
        &#x25B2;
      </div>
    </div>
    <div class = "Score-Button-Container">
      <div class = "Score-Button " onclick="DecrementScore();"> 
        &#x25BC;
      </div>
    </div>
  </div>
</div>

CSS

.Score-Control {
  width: 200px;
}

.Score-Value-Container{ 
  position:relative;
  display: table; 
  overflow: hidden;
  height:80px;
  background-color:#aaa; 
  width:66%; 
  float:left;
  font-size: 44px;
  vertical-align: middle; 
  text-align: center;
}

.Score-Value {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center;
}

.Score-UpDown{
  position:relative;
  height:80px;
  background-color: burlywood; 
  width:34%; 
  float:right;
}

.Score-Button-Container {
  display: table; 
  height: 50%; 
  width: 100%; 
  overflow: hidden; 
  background-color:green;
}

.Score-Button {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
  font-size: 27px;
}

JavaScript

function IncrementScore() {
  var RoundScore = document.getElementById("RoundScore").innerHTML;
  if (RoundScore < 10) {
    RoundScore++
    document.getElementById("RoundScore").innerHTML = RoundScore;
  }
}

function DecrementScore() {
  var RoundScore = document.getElementById("RoundScore").innerHTML;
  if (RoundScore > 1) {
    RoundScore--
    document.getElementById("RoundScore").innerHTML = RoundScore;
  }
}

在JSFiddle中的代码

- Joe Stagner

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确实起作用。

- progsource

Answer 5

“Spinner的大小”是一个模糊的概念，但是元素似乎至少遵守width、height和字体属性设置。例如：

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

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

- Jukka K. Korpela

---

他在谈论实际的上下按钮。这对我在Chrome中没有改变它们。 - Timmmm