2012-02-23 14 views
12

डिफ़ॉल्ट रूप से, <input type="search" /> मैक ओएस एक्स (गोलाकार कोनों, स्पष्ट बटन, आदि) पर "मूल" खोज फ़ील्ड की तरह प्रस्तुत करता है। मैं इस कस्टम स्टाइल को पूरी तरह से हटाना चाहता हूं ताकि इनपुट समकक्ष टेक्स्ट इनपुट (<input type="text" />) के समान दिखता हो, लेकिन इनपुट प्रकार को search पर सेट करते समय।मैं सभी डिफ़ॉल्ट वेबकिट खोज फ़ील्ड स्टाइल को कैसे हटा सकता हूं?

मैंने -webkit-appearance: none; को आजमाया है, जो इसे बहुत करीब ले जाता है ... लेकिन मार्जिन/पैडिंग के साथ कुछ मजाकिया चल रहा है जिसे मैं ओवरराइड नहीं कर सकता, जिसके कारण खोज क्षेत्र की चौड़ाई ~ 20px कमर प्रस्तुत करती है एक पाठ इनपुट से।

क्या कोई और -webkit- विशिष्ट संपत्ति है, मुझे स्टाइल को पूरी तरह से अक्षम करने के बारे में पता नहीं है?

उत्तर

45

इन शैलियों का प्रयास करें:

input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button, 
input[type="search"]::-webkit-search-results-button, 
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
} 

स्रोत: http://css-tricks.com/webkit-html5-search-inputs/#comment-82432

बजाय `के प्रदर्शन
+7

: कोई नहीं;' तुम भी उपयोग कर सकते हैं '-webkit-उपस्थिति: कोई नहीं;' जिसमें इस पागल विक्रेता उपसर्ग नियम रखता है यह अपनी जगह है। –

संबंधित मुद्दे