इनपुट तिथि के एक्स और ऊपर/नीचे तीर तत्वों से कैसे छुटकारा पाएं?

Question

केवल एक चीज है कि मैं बॉक्स में प्रदर्शित होने की जरूरत है वहाँ नारंगी त्रिकोण है, और मुझे यकीन है कि अगर मैं सीएसएस या कुछ और की जरूरत है त्रिकोण के बाईं ओर दो तत्वों से छुटकारा पाने के लिए नहीं कर रहा हूँ।

क्या ऐसा करने का कोई तरीका है? मैं सिर्फ इनपुट प्रकार date का उपयोग कर रहा हूं।

फिडल: http://jsfiddle.net/5M2PD/1/

Answer 1

उपयोग छद्म वर्ग -webkit-inner-spin-button यह WebKit- आधारित ब्राउज़र के लिए विशिष्ट शैली:

http://jsfiddle.net/5M2PD/2/

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

आप की शैली बदलना चाहते हैं ड्रॉपडाउन तीर, छद्म-वर्ग -webkit-calendar-picker-indicator का उपयोग करें:

input[type=date]::-webkit-calendar-picker-indicator { 
    -webkit-appearance: none; 
    display: none; 
} 

स्पष्ट बटन को खत्म करने के लिए, आवश्यक करने के लिए इनपुट सेट:

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" /> 

Answer 2

स्पष्ट बटन को निकालने के लिए इस का उपयोग करें:

::-webkit-clear-button 
{ 
    display: none; /* Hide the button */ 
    -webkit-appearance: none; /* turn off default browser styling */ 
} 

एक तरफ ध्यान दें के रूप में, IE10 + (source) में ऐसा करने के लिए, इसका उपयोग करें:

::-ms-clear { } 

ध्यान दें कि यह <input type="text" /> पर काम करता है, क्योंकि आईई अब भी एक स्पष्ट बटन रखता है।

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

::-webkit-datetime-edit { } 
::-webkit-datetime-edit-fields-wrapper { } 
::-webkit-datetime-edit-text { } 
::-webkit-datetime-edit-month-field { } 
::-webkit-datetime-edit-day-field { } 
::-webkit-datetime-edit-year-field { } 
::-webkit-inner-spin-button { } 
::-webkit-calendar-picker-indicator { } 

मैं भी अत्यधिक आदेश डिफ़ॉल्ट ब्राउज़र शैलियों बंद करने के लिए में निम्नलिखित का उपयोग कर की सिफारिश करेंगे; मैं इस पाया है कि जब मोबाइल ब्राउज़रों के साथ काम करने में विशेष रूप से उपयोगी होने के लिए:

input[type="date"] 
{ 
    -webkit-appearance: none; 
}