Ändern Sie die Größe der Zahleneingabe Spinner?

Question

Bei einer Zahleneingabe hat es einen Spinner, der mehrere css-Eigenschaften hat, aber ich finde keinen Weg, die Größe des Spinner selbst zu ändern. Ich spreche über <input type='number'>. Ich habe versucht, etwas zu finden, das die Größe verändern würde, aber ich konnte nichts finden. Das andere Problem, das ich vermute, ist, dass jeder Browser auf möglicherweise jedem Betriebssystem eine potenziell andere Implementierung des Spinner selbst haben wird. Wenn ich Spinner sage, spreche ich über den hervorgehobenen Teil dieses Bildes.

Ich kann den JQuery UI-Spinner nicht verwenden, da die große Anwendung, die ich entwickle, JQuery UI 1.8 verwendet, die den Spinner nicht enthält. Das Aktualisieren verursacht Probleme.

Answer 1

Sie könnten ein Eingabefeld mit zwei Tasten für sie, nach oben und unten und Stil dann, wie Sie mögen.

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

Sie dann auch überprüfen sollten, dass die Eingabe innerhalb nur Zahlen hat, so dass Ihre +/- 1 wirklich funktioniert.

Answer 2

Die "Größe des Spinner" ist ein vages Konzept, aber das <input type=number> Element scheint mindestens width, height, und Schrifteigenschaften Einstellungen gehorchen. Beispiel:

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

Ob diese Einstellungen nützlich sind, und ob sie sollten Arbeit ist eine andere Frage. Es kann argumentiert werden, dass die Implementierung solcher Elemente ein Browser-abhängiges nettes, verwendbares Widget sein soll, das für die Browserbedingungen geeignet ist, anstatt etwas, mit dem sich die Autoren herumschlagen sollten. In der Praxis wird das Widget jedoch stark von CSS-Einstellungen beeinflusst, und dies könnte in der Praxis eine gute Sache sein, z. weil das Eingabefeld standardmäßig zu breit ist. (Wir könnten erwarten, dass Browser dies gemäß den Werten min und max einstellen, aber das passiert derzeit einfach nicht.) Das Risiko besteht darin, dass Sie durch die Einstellung der Breite möglicherweise in Konflikt mit der Implementierung kommen. Der obige Code erwartet, dass die Pfeile nach oben und nach unten maximal eine Breite von einem Zeichen haben, aber diese Annahme könnte eines Tages falsch sein.

Answer 3

Dieses CSS scheint in Chrome zu funktionieren, indem die Spinner durch ein statisches Bild (eines Spinner) ersetzt werden und dann die Größe und Position des Bildes innerhalb des Elements kontrolliert und standardmäßig unsichtbar gemacht wird, bis der Benutzer darüber schwebt:

* 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

Nicht ideal, aber versuchen Sie das Spiel mit der CSS-Eigenschaft trans:

Zum Beispiel

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

Dies erhöht die Größe der gesamten Eingabe, aber vielleicht kann dies (in Verbindung mit der Einstellung von Schriftgröße, Zeilenhöhe, Höhe, Breite) einen gewünschten Effekt erzeugen.

Answer 5

Plain ole HTML ...

Keine Bibliothek oder Bilder benötigt.

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