숫자 입력 회 전자의 크기를 변경 하시겠습니까?

Question

숫자 입력에는 여러 CSS 속성이있는 회 전자가 있지만 회 전자 자체의 크기를 변경하는 방법을 찾지 못하는 것 같습니다. 나는 <input type='number'>에 대해 이야기하고있다. 나는 크기를 바꿀만한 것을 찾으려고했지만 아무 것도 찾을 수 없었습니다. 다른 모든 문제는 아마 모든 OS의 모든 브라우저가 회 전자 자체의 잠재적으로 다른 구현을 갖게 될 것이라고 추측합니다. 내가 회 전자를 말할 때 나는이 이미지의 강조된 부분을 말하고있다.

개발중인 대형 앱에서 회 전자를 포함하지 않은 JQuery UI 1.8을 사용하기 때문에 JQuery UI 회 전자를 사용할 수 없습니다. 업그레이드로 인해 문제가 발생합니다.

Answer 1

위로 및 아래로 두 개의 버튼이있는 입력 필드를 만들고 원하는 방식으로 스타일을 지정할 수 있습니다.

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

JS : +/- 1 정말로 작동하여 있도록 다음 또한, 입력은 내부의 숫자 만 가지고 확인해야

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

$('.goDown').click(function() { 
    inputField.val(inputField.val() - 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 값에 따라 브라우저를 설정할 수는 있지만 현재는 발생하지 않습니다.) 너비를 설정하면 구현과 충돌 할 수 있습니다. 위의 코드는 위쪽 화살표와 아래쪽 화살표가 최대 1 자의 너비를 갖기를 기대하지만,이 추측은 언젠가 잘못된 것일 수 있습니다.

Answer 3

이 CSS는 회 전자를 정적 이미지 (회 전자)로 교체 한 다음 요소 내에서 이미지의 크기와 위치를 제어하고 사용자가 기본 이미지를 가리킬 때까지 기본적으로 보이지 않도록 Chrome에서 작동하는 것으로 보입니다.

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

이것은 크기가 증가, 예를 들어

:

* 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와 놀아 (글꼴 크기, 선 높이, 높이, 너비 설정과 함께) 원하는 효과를 낼 수 있습니다.

Answer 5

일반 ... 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; 
} 

자바 스크립트

내가 너무 회 자체의 크기를 변경하는 방법을 발견하지 않았습니다

Code in JSFiddle