इनपुट प्रकार = "संख्या" पर वेबकिट के स्पिन बटन अक्षम करें?

Question

मेरे पास एक साइट है जो मुख्य रूप से मोबाइल उपयोगकर्ताओं के लिए है लेकिन डेस्कटॉप भी है।

मोबाइल सफारी पर, <input type="number">महान काम करता है क्योंकि यह इनपुट फ़ील्ड पर संख्यात्मक कीबोर्ड लाता है जिसमें केवल संख्याएँ होनी चाहिए।

क्रोम और सफारी में, हालांकि, नंबर इनपुट का उपयोग करके फ़ील्ड के दाईं ओर स्पिन बटन प्रदर्शित होते हैं, जो मेरे डिजाइन में बकवास की तरह दिखता है। मुझे वास्तव में बटन की आवश्यकता नहीं है, क्योंकि वे बेकार हैं जब आपको कुछ भी लिखने की आवश्यकता होती है जैसे 6-अंकीय संख्या।

क्या इसे -webkit-appearanceया किसी अन्य सीएसएस चाल के साथ अक्षम करना संभव है ? मैंने बिना ज्यादा किस्मत आजमाए।

Comments

यदि आप type="text"अन्य कारणों के लिए उपयोग करना पसंद करते हैं और केवल संख्यात्मक कीबोर्ड सुविधा के लिए नंबर पर स्विच करते हैं, तो आप pattern="[0-9]*"कीबोर्ड सुविधा प्राप्त करने के लिए उपयोग कर सकते हैं , जिससे आप बनाए रख सकते हैं type="text"। देखें stackoverflow.com/questions/6171903/…

— joshuahedlund

Answer 1

नीचे का css क्रोम और फ़ायरफ़ॉक्स दोनों के लिए काम करता है

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

Comments

ऊपर से बेहतर समाधान (अधिक पूर्ण)

— aqm

-moz-उपस्थिति: पाठ फ़ील्ड; इसके अलावा एकमात्र उत्तर था जो मेरे लिए काम करता था। धन्यवाद!

— नानोरिपर

Answer 2

मुझे पता चला कि इसके उत्तर का दूसरा भाग है।

पहले भाग ने मेरी मदद की, लेकिन मेरे पास मेरे type=numberइनपुट के दाईं ओर एक जगह थी । मैंने इनपुट पर मार्जिन शून्य कर दिया था, लेकिन जाहिर है मुझे स्पिनर पर भी मार्जिन शून्य करना था।

यह तय है:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Comments

बहुत बढ़िया। मेरे पास एक समान मुद्दा था , लेकिन थोड़ी अलग सीएसएस रणनीति के साथ, जो पूरी तरह से नई समस्याओं की ओर ले जाती है ...

— लुकास ईडर

क्या किसी को स्क्रॉल व्यवहार को ठीक करने के तरीके के बारे में पता है जहां आप स्क्रॉल कर सकते हैं और असीम रूप से नीचे? मैंने अपने इनपुट तत्व में min=0.01(और maxकुछ मनमाने मूल्य पर) सेट किया है , लेकिन मैं स्क्रॉलव्हील को सिर्फ पृष्ठ के ऊपर और नीचे जाना पसंद करूंगा। मैं AngularJS का उपयोग कर रहा हूं और मुझे कुछ भी नहीं मिल रहा है।

— JaKXz

: इस विशिष्ट समस्या के लिए एक आधिकारिक स्रोत के लिए वापस और इस प्रकार की जानकारी को लिंक css-tricks.com/snippets/css/turn-off-number-input-spinners

— जोश Habdas

स्पष्ट होने के लिए, यह माउस स्क्रॉल कार्यक्षमता को नहीं हटाता है!

— बबलू

-मोज़-उपस्थिति: फ़ायरफ़ॉक्स के लिए

— टेक्स्टफ़ील्ड

Answer 3

निश्चित नहीं है कि यह करने का सबसे अच्छा तरीका है, लेकिन इससे स्पिनर्स क्रोम 8.0.552.5 देव पर गायब हो जाते हैं:

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Comments

@JethroLarson यह क्या काम नहीं कर रहा है? आप -webkit-outer-spin-buttonइसके बजाय कोशिश कर सकते हैं ।

— रॉबर्ट

इसने टाइप के लिए बहुत अच्छा काम किया = "तारीख": इनपुट [टाइप = डेट] :: - वेबकिट-आउटर-स्पिन-बटन {-वेबकट-उपस्थिति: कोई नहीं; }

— uglymunky

Answer 4

स्पिनरों को ओपेरा में प्रदर्शित होने से रोकना असंभव लगता है। अस्थायी वर्कअराउंड के रूप में, आप स्पिनरों के लिए जगह बना सकते हैं। जहाँ तक मैं बता सकता हूँ, निम्नलिखित सीएसएस केवल पर्याप्त पैडिंग जोड़ता है, केवल ओपेरा में:

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

Comments

@Knu वास्तव में, लेकिन यह यहाँ ध्यान देने योग्य है क्योंकि उत्तर में कोड ओपेरा के साथ अनुपयोगी है।

— गोलवेन

@Goulvench कृपया नहीं :) मैंने इसे बहुत उपयोगी पाया है, कोई और भी कर सकता है।

— frnhr

Answer 5

आप निम्नलिखित ट्रिक के साथ स्पिनर को भी छिपा सकते हैं:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}