क्या इनपुट "संख्या" के लिए हमेशा ऊपर / नीचे तीर दिखाना संभव है?

Question

मैं हमेशा इनपुट "संख्या" फ़ील्ड के लिए / नीचे तीर दिखाना चाहता हूं। क्या यह संभव है? अभी तक मेरी कोई किस्मत नहीं है ...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

सीएसएस:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

Comments

के संभावित डुप्लिकेट संख्या इनपुट - हमेशा स्पिन बटन को दिखाने

— शमूएल ल्यू

क्या आपको इसका हल मिला? यह मेरे मामले में काम नहीं करता है।

— .z।

आप कौन सा ब्राउज़र उपयोग कर रहे हैं? यह Chrome में काम करता है

— Oneezy

Answer 1

अपारदर्शिता गुण का उपयोग करके आप इसे (Chrome में कम से कम) प्राप्त कर सकते हैं:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

जैसा कि ऊपर कहा गया है, यह केवल क्रोम में काम करेगा। तो अन्य ब्राउज़रों के लिए एक कमबैक के बिना जंगल में इस कोड का उपयोग करने से सावधान रहें।

Comments

जैसा कि @NewBeeee ने कहा: फ़ायरफ़ॉक्स और सफारी में, इसे हमेशा दिखाने के लिए एक डिफ़ॉल्ट विशेषता ( stackoverflow.com/questions/24286506/… )

— titusfx

Answer 2

मैंने यह कोशिश की और यह काम कर गया

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

</style>
<input type="number" value="1" min="1" max="999">

यहां मिला

Answer 3

यदि आप विभिन्न ब्राउज़रों में समान उपस्थिति प्राप्त करने की कोशिश कर रहे हैं, तो आपको एक प्लगइन / विजेट का उपयोग करने के लिए मजबूर किया जा सकता है या एक स्वयं का निर्माण किया जा सकता है, मुख्य ब्राउज़र सभी अलग-अलग स्पिनरों को लागू करते हैं।

JQuery यूआई के स्पिनर विजेट की कोशिश करें जब यह स्टाइल की बात आती है तो यह बहुत अधिक बहुमुखी प्रतिभा प्रदान करता है।

काम करने का उदाहरण

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();

Comments

मैं हर ब्राउज़र का समर्थन प्राप्त करने की कोशिश नहीं कर रहा हूँ, मैं सिर्फ यह जानना चाहता था कि क्या कोई सीएसएस ट्रिक है जो उन्हें हमेशा देखने योग्य बनाने की अनुमति देता है

— Oneezy

इसके पीछे मेरा पूरा विचार "शान से नीचा दिखाना" था .. यदि ब्राउज़र समर्थन नहीं करता है तो यह केवल एक पाठ बॉक्स प्रतीत होगा। । यह वे डिफ़ॉल्ट नंबर के स्पिनर की उपस्थिति पर लेते हैं, लेकिन सिर्फ होवर पर नहीं

— Oneezy

JQuery UI के साथ समस्या यह है कि बूटस्ट्रैप के साथ बहुत सारे संघर्ष हैं। इसलिए अगर आप अपने प्रोजेक्ट में बूटस्ट्रैप का इस्तेमाल कर रहे हैं तो आप मुश्किल में पड़ जाएंगे

— दत्तात्रेय कुगवे

Answer 4

यदि आप अपने इनपुट पर ध्यान केंद्रित नहीं करते हैं, तो करें

   document.getElementById(<id>).focus();