स्पिनर को इनपुट नंबर में छिपाएं - फ़ायरफ़ॉक्स 29

Question

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

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

क्या सीएसएस या jQuery के साथ इसे अक्षम करना संभव है?

Comments

यदि आप स्पिन तीर नहीं चाहते हैं, तो उपयोग न करें type="number"। आप यह सुनिश्चित करने के लिए कि यह एक संख्या है regex सेट करने के type="text"लिए patternविशेषता और उपयोग कर सकते हैं ।

— रॉकेट हज़मत

-webkit- इनर-स्पिन-बटन -webkit- बाहरी-स्पिन-बटन के साथ -webkit- उपस्थिति: कोई नहीं; मार्जिन: 0; फ़ायरफ़ॉक्स में काम मत करो।

— नेरुजुनियर

@RocketHazmat: type="number"मोबाइल ब्राउज़रों के लिए पूर्ण कीबोर्ड के बजाय संख्यात्मक कीबोर्ड दिखाना आवश्यक है।

— कोडमैनएक्स

<input type="tel">यह केवल संख्या है और इसमें स्पिनर शामिल नहीं हैं।

— TomasVeras

बदलना type="text"एक बुरा विचार है क्योंकि टच डिवाइस गलत कीबोर्ड दिखाएंगे।

— WhyNotHugo

Answer 1

इस ब्लॉग पोस्ट के अनुसार , आपको -moz-appearance:textfield;पर सेट करना होगा input।

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

<input type="number" step="0.01"/>

Comments

मैंने @-moz-document url-prefix() { ... }इसे लपेटा और यह वह है जो मैं चाहता हूं: फ़ायरफ़ॉक्स में स्पिनरों को छुपाता है, जहां वे खराब दिखते हैं, लेकिन उन्हें अन्य ब्राउज़रों में जीवित रखते हैं, जिनमें ओपी के उल्लेख के अनुसार संख्यात्मक कीबोर्ड भी शामिल हैं।

— 3

ज्योफ ग्राहम से कुछ और उपयोगी जानकारी: न्यूमेरिक

— इनपुट्स

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

— जोवन्नी जी

@ जोवानगी: अगर आप स्पिनरों को नहीं हटाते हैं, तब भी आप फ़ायरफ़ॉक्स में गैर-संख्यात्मक वर्ण दर्ज कर सकते हैं। एमडीएन पर डेमो के साथ इसे आज़माएं । Chrome दोनों उदाहरणों में गैर-संख्यात्मक इनपुट को रोकता है।

— रिचर्ड डीमिंग

@alxndr: इसके अलावा, मैंने अभी-अभी क्रोम 66 में "रन कोड स्निपेट" की कोशिश की है, और यह उम्मीद के मुताबिक काम करता है।

— रिचर्ड डीमिंग

Answer 2

यह इंगित करने योग्य है कि -moz-appearanceइन तत्वों का डिफ़ॉल्ट मान number-inputफ़ायरफ़ॉक्स में है।

यदि आप स्पिनर को डिफ़ॉल्ट रूप से छिपाना चाहते हैं, तो आप -moz-appearance: textfieldशुरू में सेट कर सकते हैं , और यदि आप चाहते हैं कि स्पिनर :hover/ पर दिखाई दे :focus, तो आप पिछली स्टाइल को ओवरराइट कर सकते हैं -moz-appearance: number-input।

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

मैंने सोचा कि कोई ऐसा व्यक्ति मिल सकता है जो मुझे हाल ही में क्रोम / एफएफ के बीच स्थिरता में सुधार करने के प्रयास में ऐसा करना पड़ा है (चूंकि यह क्रोम में डिफ़ॉल्ट रूप से व्यवहार करने वाले नंबर की जानकारी है)।

यदि आप सभी उपलब्ध मानों को देखना चाहते हैं -moz-appearance, तो आप उन्हें यहाँ (mdn) पा सकते हैं ।

Answer 3

में SASS/ SCSSशैली, तो आप इस तरह लिख सकते हैं:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

निश्चित रूप से इस कोड शैली में उपयोग कर सकते हैं PostCSS।

Answer 4

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


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}

Comments

ऊपर css कोड html <इनपुट टाइप = "नंबर"> स्पिनर

— नवीन प्रकाश

Answer 5

29.0.1 को फ़ायरफ़ॉक्स अपडेट का एक ही मुद्दा पोस्ट किया गया, यह यहां भी सूचीबद्ध है https://bugzilla.mozilla.org/show_bug.cgi?id=947728

समाधान: उन्होंने (मोज़िला के लोगों ने) इसके लिए "-मोज़-उपस्थिति" के लिए समर्थन शुरू करके यह तय किया है <input type="number">। आपको बस " -moz-appearance:textfield;" के साथ अपने इनपुट क्षेत्र से जुड़ी शैली की आवश्यकता है ।

मुझे CSS तरीका पसंद है: -

.input-mini{
-moz-appearance:textfield;}

या

आप इसे इनलाइन भी कर सकते हैं:

<input type="number" style="-moz-appearance: textfield">

Answer 6

मैंने ऊपर दिए गए उत्तरों से और स्कैस में ओपेरा में इनपुट [टाइप = "संख्या"] से तीर निकालने के लिए कुछ उत्तर मिलाए :

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

Answer 7

यह मेरे लिए काम किया:

    input[type='number'] {
    appearance: none;
}

फ़ायरफ़ॉक्स, सफारी, क्रोम में हल। इसके अलावा, -moz-appearance: textfield;अब और समर्थित नहीं है ( https://developer.mozilla.org/en-US/docs/Web/CSS/learance )