संख्या इनपुट स्पिनर का आकार बदलें?

Question

एक इनपुट इनपुट पर इसमें एक स्पिनर होता है जिसमें कई सीएसएस गुण होते हैं लेकिन मुझे स्पिनर के आकार को बदलने का कोई तरीका नहीं दिख रहा है। मैं <input type='number'> के बारे में बात कर रहा हूं। मैंने ऐसा कुछ खोजने की कोशिश की जो आकार बदल देगी लेकिन मुझे कुछ भी नहीं मिला है। मुझे लगता है कि दूसरा मुद्दा यह है कि संभवतः प्रत्येक ओएस पर हर ब्राउज़र स्पिनर के संभावित रूप से अलग-अलग कार्यान्वयन के लिए जा रहा है। जब मैं स्पिनर कहता हूं तो मैं इस छवि के हाइलाइट किए गए हिस्से के बारे में बात कर रहा हूं।

मैं JQuery UI स्पिनर का उपयोग नहीं कर सकता क्योंकि मैं जिस बड़े ऐप का विकास कर रहा हूं वह JQuery UI 1.8 का उपयोग करता है जिसमें स्पिनर शामिल नहीं था। मुद्दों का उन्नयन समस्याएं।

Answer 1

आप ऊपर और नीचे के लिए दो बटन के साथ एक इनपुट फ़ील्ड बना सकते हैं और जिस तरह से आप चाहें उन्हें स्टाइल कर सकते हैं।

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

आप तो भी जांच होनी चाहिए, कि इनपुट केवल संख्या के अंदर है, तो अपने +/- 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">

या नहीं। यह तर्क दिया जा सकता है कि ऐसे तत्वों के कार्यान्वयन को ब्राउज़र-निर्भर अच्छा, उपयोग करने योग्य विजेट ब्राउज़िंग स्थितियों के लिए उपयुक्त होने की अपेक्षा की जाती है, लेखक के साथ गड़बड़ी करना चाहिए। लेकिन व्यावहारिक रूप से, विजेट बड़े पैमाने पर सीएसएस सेटिंग्स से प्रभावित होता है, और यह अभ्यास में एक अच्छी बात हो सकती है, उदा। क्योंकि इनपुट बॉक्स डिफ़ॉल्ट रूप से बहुत व्यापक होता है। (हम उम्मीद कर सकते हैं कि ब्राउज़र इसे min और max मानों के अनुसार सेट करें, लेकिन यह वर्तमान में नहीं होता है।) जोखिम यह है कि चौड़ाई निर्धारित करके, आप कार्यान्वयन के साथ संघर्ष कर सकते हैं। ऊपर दिया गया कोड ऊपर और नीचे तीरों को एक वर्ण की चौड़ाई लेने की अपेक्षा करता है, लेकिन यह अनुमान कुछ दिन गलत हो सकता है।

Answer 3

यह सीएसएस स्पिनरों को एक स्थिर छवि (स्पिनर के साथ) के साथ बदलकर क्रोम में काम करता प्रतीत होता है और फिर तत्व के भीतर छवि के आकार और स्थिति को नियंत्रित करता है और इसे डिफ़ॉल्ट रूप से अदृश्य बना देता है जब तक कि उपयोगकर्ता इसे ऊपर नहीं ले जाता:

* 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

आदर्श नहीं है, लेकिन कोशिश के आसपास सीएसएस के साथ संपत्ति को बदलने की भूमिका निभाते हुए

उदाहरण के लिए,

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

यह आकार बढ़ जाती है पूरे इनपुट का, लेकिन शायद यह (फ़ॉन्ट आकार, रेखा-ऊंचाई, ऊंचाई, चौड़ाई सेटिंग के संयोजन के साथ) वांछित प्रभाव उत्पन्न कर सकता है।

Answer 5

सादा OLE एचटीएमएल ...

कोई पुस्तकालय या छवियों की आवश्यकता है।

एचटीएमएल

<!-- 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> 

सीएसएस

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

जावास्क्रिप्ट

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