IE10 के "स्पष्ट क्षेत्र" एक्स बटन को कुछ इनपुट पर निकालें?

Question

यह सुनिश्चित करने के लिए एक उपयोगी सुविधा है, लेकिन क्या इसे अक्षम करने का कोई तरीका है?
उदाहरण के लिए, यदि फॉर्म एक एकल टेक्स्ट फ़ील्ड है और उसके पास पहले से एक "स्पष्ट" बटन है, तो यह एक्स के लिए भी बहुत अच्छा है। इस स्थिति में, इसे हटाने के लिए बेहतर होगा।

क्या यह किया जा सकता है, और यदि हां, तो कैसे?

Comments

यह एक डिफ़ॉल्ट मान के साथ एक क्षेत्र पर भी उपयोगी है जहां रिक्त का मतलब नहीं है, उदाहरण के लिए मात्रा।

— जो फ्लिन

चूंकि यह इनपुट टाइपिंग को ट्रिगर नहीं कर रहा है, जब आप जावास्क्रिप्ट इवेंट को बाइंड करते हैं तो यह बहुत मुश्किल है।

— कीवी

Answer 1

बॉक्स के लिए ::-ms-clearछद्म तत्व शैली :

.someinput::-ms-clear {
    display: none;
}

Comments

यदि आप IE10 से पहले इंजन के साथ अपने पृष्ठ को प्रस्तुत करने के लिए IE संगतता मोड का उपयोग करते हैं तो यह हास्यास्पद है, यह छद्म तत्व काम नहीं करता है और यह वैसे भी बटन दिखाता है।

— Yousef Salimpour

@Yousef: हाँ, यह है कि यह कैसे काम करता है और क्यों आप एक वास्तविक वेबसाइट में संगतता मोड का उपयोग कभी नहीं करना चाहिए का हिस्सा है। यह वास्तव में संगत नहीं है :)

— Ry-

@minitech - विंडोज 7 मशीन पर इसका IE9

— 21

यह नियंत्रण केवल Win8 पर IE10 + में दिखाई देता है। चाल यह है कि यह तब भी प्रकट होता है जब दस्तावेज़ को संगतता मोड में रखा जाता है।

— EricLaw

@ EricLaw: खैर, केवल Win8 पर नहीं। मैं अभी विंडोज 7 का उपयोग कर रहा हूं और मैं अपने IE10 में उन एक्स बटन को देख सकता हूं। तो आप कह सकते हैं कि यह एक IE10 + केवल सुविधा है (IE9 के बारे में निश्चित नहीं है, हालांकि), लेकिन निश्चित रूप से केवल Win8 नहीं है, क्योंकि यह IE10 के Win7 संस्करण में दिखाई देता है। वैसे भी, टिप के लिए धन्यवाद, @minitech!

— OMA

Answer 2

मैंने पाया कि इसे widthऔर सेट करना बेहतर heightहै 0px। अन्यथा, IE10 फ़ील्ड पर परिभाषित पैडिंग को अनदेखा करता है - padding-right- जिसका उद्देश्य टेक्स्ट को 'X' आइकन पर टाइप करने से रोकना था जिसे मैंने इनपुट फ़ील्ड पर ओवरले किया था। मैं अनुमान लगा रहा हूं कि IE10 आंतरिक रूप padding-rightसे ::--ms-clearछद्म तत्व के लिए इनपुट लागू कर रहा है , और छद्म तत्व को छुपाने से padding-rightमूल्य को पुनर्स्थापित नहीं किया जाता है input।

इसने मेरे लिए बेहतर काम किया:

.someinput::-ms-clear {
  width : 0;
  height: 0;
}

Comments

यहाँ इस वर्कअराउंड को दर्शाने वाला एक jsFiddle है: jsfiddle.net/zoldello/S5YRj

— Phil

Answer 3

मैं इस नियम को टाइप टेक्स्ट के सभी इनपुट क्षेत्रों पर लागू करूँगा, इसलिए इसे बाद में डुप्लिकेट करने की आवश्यकता नहीं है:

input[type=text]::-ms-clear { display: none; }

एक का उपयोग करके भी कम विशिष्ट प्राप्त कर सकते हैं:

::-ms-clear { display: none; }

मैंने इस उत्तर को जोड़ने से पहले भी बाद में उपयोग किया है, लेकिन सोचा कि ज्यादातर लोग इससे अधिक विशिष्ट होना पसंद करेंगे। दोनों समाधान ठीक काम करते हैं।

Comments

धन्यवाद, यह मेरे लिए काम किया।

— सोराज जोस

Answer 4

आपको ::-ms-clear( http://msdn.microsoft.com/en-us/library/windows/apps/hh465740.aspx ) के लिए स्टाइल करना चाहिए :

::-ms-clear {
   display: none;
}

और आप ::-ms-revealपासवर्ड क्षेत्र के लिए छद्म तत्व के लिए भी शैली :

::-ms-reveal {
   display: none;
}

Comments

नोट - इस बारे में सोचें कि क्या आप ::-ms-revealइसे हटाने से पहले तत्व को काम कर सकते हैं ! (या यदि आप मूल प्रश्नकर्ता की तरह सभी के लिए यह बटन प्रदान कर रहे हैं।) कुछ वास्तव में इसका उपयोग करते हैं।

— Ry-

@ मिनिटेक - जो बहुत अच्छा लगता है। क्या आप हमें बता सकते हैं कि इनपुट घटनाओं पर बाध्यकारी जावास्क्रिप्ट के साथ कैसे काम करें? यह एक घटना नहीं बढ़ाता है इसलिए इसके साथ काम करना लगभग असंभव है।

— डेरेलनॉर्टन

Answer 5

मुझे लगता है कि यह ध्यान देने योग्य है कि जब कोई पृष्ठ संगतता मोड में चल रहा होता है तो सभी शैली और सीएसएस आधारित समाधान काम नहीं करते हैं। संगतता मोड रेंडरर अनदेखी करता है :: - एमएस-स्पष्ट तत्व, भले ही ब्राउज़र एक्स दिखाता है।

यदि आपके पृष्ठ को संगतता मोड में चलाने की आवश्यकता है, तो आप एक्स शो के साथ फंस सकते हैं।

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

Answer 6

"समय" इनपुट में तीर छिपाने और पार करने के लिए:

#inputId::-webkit-outer-spin-button,
#inputId::-webkit-inner-spin-button,
#inputId::-webkit-clear-button{
    -webkit-appearance: none;
    margin: 0;
}