Измените размер входного счетчика числа?

Question

На вводе номера у него есть счетчик, который имеет несколько свойств css, но я не могу найти способ изменить размер самого счетчика. Я говорю о <input type='number'>. Я попытался найти что-то, что изменило бы размер, но я ничего не смог найти. Другая проблема, я думаю, заключается в том, что каждый браузер, возможно, в каждой ОС будет иметь потенциально различную реализацию самого счетчика. Когда я говорю spinner, я говорю о выделенной части этого изображения.

Я не могу использовать JQuery UI spinner, потому что большое приложение, которое я разрабатываю, использует JQuery UI 1.8, который не включает в себя счетчик. Модернизация вызывает проблемы.

Answer 1

Вы можете создать поле ввода с двумя кнопками вверх и вниз и стилизовать их так, как вам нравится.

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

ЯШ:

var inputField = $('input[name="something"]'); 
$('.goUp').click(function() { 
    inputField.val(inputField.val() + 1); 
}); 

$('.goDown').click(function() { 
    inputField.val(inputField.val() - 1); 
}); 

вы тогда должны также проверить, что вход имеет только цифры внутри, так что ваш +/- 1 действительно работает.

Answer 2

«Размер прядильника» - это неопределенное понятие, но элемент <input type=number>, по-видимому, подчиняется по меньшей мере width, height и настройкам свойств шрифта. Пример:

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

ли такие параметры полезны и будут ли они должны работа другой вопрос. Можно утверждать, что реализация таких элементов, как ожидается, будет зависящим от браузера приятным, пригодным к использованию виджетам, подходящим для условий просмотра, а не тем, с чем авторы должны обходиться. Но на практике виджет в значительной степени зависит от настроек CSS, и на практике это может быть хорошо. потому что поле ввода по умолчанию слишком велико. (Мы могли ожидать, что браузеры установят его в соответствии с значениями min и max, но этого пока не происходит.) Риск состоит в том, что путем установки ширины вы можете столкнуться с реализацией. В приведенном выше коде предполагается, что стрелки вверх и вниз будут иметь ширину не более одного символа, но это предположение может когда-нибудь ошибиться.

Answer 3

Этот 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; 
} 

Answer 4

Не идеально, но попробуйте поэкспериментировать с CSS преобразования свойства:

Например,

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

Это увеличивает размер от всего ввода, но, возможно, это (в сочетании с установкой размера шрифта, высоты линии, высоты, ширины) может вызвать желаемый эффект.

Answer 5

Plain ole HTML ...

Не требуется библиотеки или изображений.

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