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

在数字输入上，它有一个微调器，它有几个css属性，但我似乎找不到一种方法来更改微调器本身的大小。我说的是

。我试着找到一些可以改变大小的东西，但我什么也没找到。我想另一个问题是，可能每个操作系统上的每个浏览器都会有一个可能不同的微调器实现。当我说spinner时，我指的是这张图片的突出部分。

---

我不能使用jQueryUI微调器，因为我正在开发的大型应用程序使用的是jQueryUI1.8，它不包括微调器。升级会导致问题

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

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

---

然后还应检查输入中是否只有数字，以便+/-1真正起作用。

微调器的大小是一个模糊的概念，但

元素似乎至少遵循

宽度
、
高度
和字体属性设置。例如：


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

不理想，但请尝试使用CSS transform属性：

比如说,

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

这会增加整个输入的大小，但这（与设置字体大小、行高、高度、宽度一起）可能会产生所需的效果
 普通ole HTML

不需要库或图像

HTML

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

函数递增分数（）{
var RoundScore=document.getElementById（“RoundScore”）.innerHTML；
如果（总分<10）{
总分++
document.getElementById（“RoundScore”）.innerHTML=RoundScore；
}
}
函数递减核心（）{
var RoundScore=document.getElementById（“RoundScore”）.innerHTML；
如果（总分>1）{
总分--
document.getElementById（“RoundScore”）.innerHTML=RoundScore；
}
}

我也没有发现如何更改微调器本身的大小。即使这不是明确可配置的，您也会认为它至少会自动缩放（与输入的高度、行高和/或字体大小成比例）。照目前的情况，如果您将其他所有内容都变大，因为微调器的大小保持较小。微调器的高度
⏶/
⏷按钮绑定到元素的
字体大小
属性，但据我所知，宽度是固定的/不可更改的。（在Firefox和Chrome中测试）他说的是实际的上下按钮。这对我来说在Chrome中并没有改变它们。这是可行的。但它使用最近邻插值来放大按钮-甚至不是双线性的！-所以它看起来很糟糕。这很有趣。是的，你可能需要调整它的邻域大小、字体等。哦，不管怎样，这只是一个黑客的想法。@Timmmm：如果我试着这样做，我可能会将它包装在一个内联块中，其中有不可见的溢出（来自缩放）被切断。你基本上会把疯狂封装成更容易管理的东西。我不希望你理解我刚才说的话，但我也没有时间进一步解释。我理解你，但旋转器的全部意义在于它能给你带来好处（理论上）按钮很容易。如果你只是想非法隐藏它们，你可以使用
和单独的按钮，正如@progsource所建议的。如果有人有时间报告这是一个错误（给每个有问题的浏览器），在这里发布链接，我会去那里插话。
<!--   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>

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

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