Modificare la dimensione del filatore di input del numero?

Question

Su un ingresso numerico ha uno spinner che ha diverse proprietà css ma non riesco a trovare un modo per cambiare la dimensione della filatrice stessa. Sto parlando di <input type='number'>. Ho provato a trovare qualcosa che avrebbe cambiato le dimensioni, ma non sono stato in grado di trovare nulla. L'altro problema credo sia che ogni browser su possibilmente ogni sistema operativo avrà un'implementazione potenzialmente diversa dello spinner stesso. Quando dico spinner, sto parlando della parte evidenziata di questa immagine.

Non riesco a utilizzare lo spinner JQuery UI perché l'app di grandi dimensioni che sto sviluppando utilizza l'interfaccia utente JQuery 1.8 che non include lo spinner. L'aggiornamento causa problemi.

Answer 1

È possibile creare un campo di input con due pulsanti per l'alto e il basso e modificarli come desiderato.

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

allora dovrebbe anche controllare che l'ingresso ha solo numeri all'interno, in modo che il vostro +/- 1 funziona davvero.

Answer 2

La "dimensione dello spinner" è un concetto vago, ma l'elemento <input type=number> sembra obbedire almeno a width, height e alle impostazioni delle proprietà dei caratteri. Esempio:

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

Se tali impostazioni sono utili e se dovrebbero lavoro è una questione diversa. Si può affermare che l'implementazione di tali elementi dovrebbe essere un widget piacevole, utilizzabile dal browser e adatto alle condizioni di navigazione, piuttosto che qualcosa con cui gli autori dovrebbero scherzare. Ma in pratica il widget è largamente influenzato dalle impostazioni CSS e questa potrebbe essere una buona cosa nella pratica, ad es. perché la casella di input tende ad essere troppo ampia per impostazione predefinita. (Potremmo aspettarci che i browser lo impostino in base ai valori min e max, ma ciò non accade al momento.) Il rischio è che, impostando la larghezza, si potrebbe entrare in conflitto con l'implementazione. Il codice sopra si aspetta che le frecce su e giù prendano una larghezza di un carattere al massimo, ma questa ipotesi potrebbe un giorno essere sbagliata.

Answer 3

Questo CSS sembra funzionare in Chrome sostituendo gli spinners con un'immagine statica (di uno spinner) e quindi controllare la dimensione e la posizione dell'immagine all'interno dell'elemento e renderlo invisibile per impostazione predefinita fino a quando l'utente non passa sopra di esso:

* 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 4

Non è l'ideale, ma provate a giocare con il CSS trasformare immobile:

Per esempio,

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

Questo aumenta la dimensione dell'intero input, ma forse questo (in concomitanza con l'impostazione di font-size, line-height, height, width) può produrre l'effetto desiderato.

Answer 5

Plain ole HTML ...

Nessuna biblioteca o immagini necessarie.

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