Thay đổi kích thước của đầu vào số spinner?

Question

Trên đầu vào số, nó có một spinner có nhiều thuộc tính css nhưng tôi dường như không thể tìm cách thay đổi kích thước của bản thân bộ xoay. Tôi đang nói về <input type='number'>. Tôi đã thử tìm thứ gì đó có thể thay đổi kích cỡ nhưng tôi không thể tìm thấy bất cứ thứ gì. Một vấn đề khác mà tôi đoán là mọi trình duyệt trên mọi hệ điều hành đều có khả năng thực thi khác nhau của chính spinner. Khi tôi nói spinner tôi đang nói về phần nổi bật của hình ảnh này.

Tôi không thể sử dụng trình thu thập giao diện người dùng JQuery vì ứng dụng lớn mà tôi đang phát triển sử dụng JQuery UI 1.8 không bao gồm trình quay số. Nâng cấp gây ra sự cố.

Answer 1

Bạn có thể tạo trường nhập bằng hai nút để lên và xuống và tạo kiểu cho chúng theo cách bạn muốn.

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

sau đó bạn cũng nên kiểm tra, mà đầu vào chỉ có số bên trong, do đó +/- 1 của bạn thực sự hoạt động.

Answer 2

“Kích thước của spinner” là một khái niệm mơ hồ, nhưng phần tử <input type=number> dường như tuân theo ít nhất width, height và cài đặt thuộc tính phông chữ. Ví dụ:

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

Cho dù các thiết lập như vậy là hữu ích và cho dù họ nên công việc là một vấn đề khác nhau. Nó có thể được lập luận rằng việc thực hiện các yếu tố như vậy được dự kiến ​​sẽ là một widget phụ thuộc tốt đẹp, có thể sử dụng trình duyệt phù hợp với điều kiện duyệt web, chứ không phải là một cái gì đó mà tác giả nên gây rối. Nhưng trên thực tế, tiện ích con phần lớn bị ảnh hưởng bởi cài đặt CSS và điều này có thể là một điều tốt trong thực tế, ví dụ: vì hộp nhập liệu có xu hướng quá rộng theo mặc định. (Chúng tôi có thể mong đợi các trình duyệt để đặt nó theo các giá trị min và max, nhưng điều này không xảy ra hiện tại.) Nguy cơ là bằng cách đặt chiều rộng, bạn có thể xung đột với việc triển khai. Đoạn mã trên dự kiến ​​các mũi tên lên và xuống để có chiều rộng tối đa một ký tự, nhưng dự đoán này có thể một ngày nào đó sai.

Answer 3

CSS này dường như hoạt động trong Chrome bằng cách thay thế các đối tượng có hình ảnh tĩnh (của một spinner) và sau đó kiểm soát kích thước và vị trí của hình ảnh trong phần tử đó và làm cho nó ẩn theo mặc định cho đến khi người dùng di chuột qua nó:

* 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

Không lý tưởng, nhưng cố gắng chơi xung quanh với CSS transform tài sản:

Ví dụ,

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

Điều này làm tăng kích thước của toàn bộ đầu vào, nhưng có thể điều này (cùng với việc thiết lập kích thước phông chữ, chiều cao dòng, chiều cao, chiều rộng) có thể tạo ra hiệu ứng mong muốn.

Answer 5

Đồng bằng ole HTML ...

Không yêu cầu thư viện hoặc hình ảnh.

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