आईओएस इनपुट छाया

Question

iOS पर निकालें (सफारी 5) मेरे पास है इनपुट तत्व (ऊपर भीतरी छाया) के लिए निम्नलिखित हैं:

मैं शीर्ष छाया निकालना चाहते हैं, बग -webkit-appearance बचाने नहीं करता है।

वर्तमान शैली है:

input {  
    border-radius: 15px; 
    border: 1px dashed #BBB; 
    padding: 10px; 
    line-height: 20px; 
    text-align: center; 
    background: transparent; 
    outline: none;  
    -webkit-appearance: none; 
    -moz-appearance: none; 
} 

Answer 1

आप -webkit-appearance: none; उपयोग करने के लिए डिफ़ॉल्ट आईओएस शैलियों को ओवरराइड करने की आवश्यकता होगी। हालांकि, सीएसएस में केवल input टैग का चयन डिफ़ॉल्ट आईओएस शैलियों को ओवरराइड नहीं करेगा, क्योंकि आईओएस एक विशेषता चयनकर्ता input[type=text] का उपयोग करके इसकी शैलियों को जोड़ता है। इसलिए आपके सीएसएस को प्री-सेट किए गए डिफ़ॉल्ट आईओएस सीएसएस शैलियों को ओवरराइड करने के लिए एक विशेषता चयनकर्ता का उपयोग करने की आवश्यकता होगी।

इस प्रयास करें:

input[type=text] { 
    /* Remove First */ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 

    /* Then Style */ 
    border-radius: 15px; 
    border: 1px dashed #BBB; 
    padding: 10px; 
    line-height: 20px; 
    text-align: center; 
    background: transparent; 
    outline: none;  
} 

सहायक लिंक:

आप सीख सकते हैं और अधिक appearance यहाँ के बारे में:

http://css-tricks.com/almanac/properties/a/appearance/

आप सीएसएस विशेषता चयनकर्ताओं के बारे में अधिक जानकारी चाहते हैं, तो आप यहाँ एक बहुत जानकारीपूर्ण लेख पा सकते हैं:

http://css-tricks.com/attribute-selectors/

Answer 2

वेबकिट सभी गुण

-webkit-appearance: none; 

कोशिश निकाल देंगे अपने इनपुट तत्व पर छाया को हटाने के लिए प्रॉपर्टी बॉक्स-छाया का उपयोग

box-shadow: none !important; 

Answer 3

background-clip: padding-box; 

छाया को भी हटाने के लिए लगता है।

@davidpauljunior का उल्लेख किया गया है; सामान्य इनपुट चयनकर्ता पर सावधानीपूर्वक -webkit-appearance सेट करें।

Answer 4

यह मेरे लिए बेहतर काम करता है। इसके अलावा इसका मतलब है कि मुझे इसे हर अलग-अलग प्रकार के इनपुट (यानी टेक्स्ट, टेलि, ईमेल इत्यादि) पर लागू करने की आवश्यकता नहीं है।

* { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
}