Change the size of the input number counter?

Question

On entering the number, it has a counter that has several css properties, but I cannot find a way to resize the counter itself. I am talking about <input type='number'> . I tried to find something that would resize, but I could not find anything. Another problem, I think, is that each browser, possibly in each OS, will have a potentially different implementation of the counter 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 application that I am developing uses jQuery UI 1.8, which does not include a counter. Modernization is causing problems.

Answer 1

This CSS seems to work in Chrome, replacing spinners with a static image (spinner), and then controls the size and position of the image inside the element and makes it invisible by default until the user clicks on it:

 * 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

Not perfect, but try playing with the CSS transform property:

For example,

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

This increases the size of the entire input, but perhaps this (combined with setting the font size, line height, height, width) can create the desired effect.

Answer 3

"Spinner size" is an indefinite concept, but the <input type=number> element seems to obey at least the width , height and font property settings. Example:

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

Whether such settings are useful and whether they should work is another problem. It can be argued that the implementation of such elements is expected to be browser-specific, enjoyable, usable widgets, suitable for viewing conditions, and not what authors should do with. But in practice, the widget is heavily dependent on CSS settings, and in practice, this can be good. because the default input field is too large. (We could expect browsers to set it according to the min and max values, but that just isn't happening at the moment.) The risk is that by setting the width, you might run into an implementation. The code above assumes that the up and down arrows will have a width of no more than one character, but this assumption may not be correct.

Answer 4

You can create an input field with two up and down buttons and style them the way you like.

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

You should also check that the input only has numbers inside, so that your +/- 1 really works.

Answer 5

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