Change the size of the number input spinner?

Question

On a number input it has a spinner which has several css properties but I can't seem to find a way to change the size of the spinner itself. I am talking about <input type='number'>. I tried finding something that would change the size but I haven't been able to find anything. The other issue I guess is that every browser on possibly every OS is going to have a potentially different implementation of the spinner itself. When I say spinner I am talking about the highlighted part of this image.

I cannot use the JQuery UI spinner because the large app I am developing uses JQuery UI 1.8 which did not include the spinner. Upgrading causes issues.

Answer 1

Plain ole HTML...

No library or images required.

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

Code in JSFiddle

Answer 2

Not ideal, but try playing around with the CSS transform property:

For example,

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

This increases the size of the entire input, but maybe this (in conjunction with setting font-size, line-height, height, width) can produce a desired effect.