IOS इनपुट छाया निकालें

Question

IOS (Safari 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;
}

Comments

एक साइड नोट के रूप में, आपको सामान्य inputचयनकर्ता पर '-webkit-उपस्थिति' की सावधानीपूर्वक स्थापना करनी चाहिए । यह रेडियो बटन और चेकबॉक्स पर अवांछित प्रभाव पैदा कर सकता है।

— दाविदपुलजुनियोर

धन्यवाद मैं इसका उपयोग तत्व पर करता

— हूं

Answer 1

आपको -webkit-appearance: none;डिफ़ॉल्ट IOS शैलियों को ओवरराइड करने के लिए उपयोग करना होगा । हालाँकि, inputCSS में केवल टैग का चयन करने से डिफ़ॉल्ट IOS शैलियों को ओवरराइड नहीं किया जाएगा, क्योंकि IOS एक विशेषता चयनकर्ता का उपयोग करके इसे शैली कहते हैं 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/

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

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

Comments

आप इन शैलियों को input[type=password]भी लागू करना चाह सकते हैं।

— रॉकलाइटite

यह पद लगभग 4 साल पुराना है। क्या इसे अद्यतन करने की आवश्यकता है?

वर्तमान में उपयोग किया जाने वाला सफारी चयनकर्ता है textarea, input[type="range"], input, input:matches([type="password"], [type="search"])- बस इसका उपयोग करें और इसे सभी मामलों के लिए काम करना चाहिए।

— da_berni

मेरे लिए यह तभी काम किया जब मैंने आवेदन !importantकिया appearance। साथ ही s के appearanceलिए भी काम करना चाहिए select।

— रुइवाबोआस

Answer 2

background-clip: padding-box;

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

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

Comments

background-clip: padding-box;iOS पर पाठ इनपुट फ़ील्ड के भीतर छाया को हटा देगा। उदाहरण के लिए codepen.io/jstnrs/pen/YXBLVN देखें (iOS डिवाइस पर URL खोलना सुनिश्चित करें)।

— jstnrs

यह काम करता है, लेकिन क्या किसी को पता है कि यह कैसे काम करता है? धन्यवाद।

— Nostalg.io

मेरे लिए काम नहीं किया, लेकिन -webkit-appearance: none;किया।

— लेफी तारिक

Answer 3

वेबकिट सभी संपत्तियों को हटा देगा

-webkit-appearance: none;

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

box-shadow: none !important;

Answer 4

मैंने एक समाधान के साथ आने की कोशिश की कि a।) काम करता है और b।) मैं समझ पा रहा हूं कि यह क्यों काम करता है ।

मुझे पता है कि इनपुट के लिए छाया (और इनपुट के लिए गोल सीमा [प्रकार = "खोज"]) एक पृष्ठभूमि-छवि से आती है।

तो स्पष्ट रूप से सेटिंग background-image: noneमेरा पहला प्रयास था, लेकिन यह काम नहीं लगता है।

background-image: url()कार्य सेट करना , लेकिन मैं अभी भी खाली होने के बारे में चिंतित हूं url()। वर्तमान में यह केवल एक बुरा एहसास है।

background-clip: padding-box; के रूप में अच्छी तरह से काम करने के लिए लगता है, लेकिन "पृष्ठभूमि-क्लिप" डॉक्स पढ़ने के बाद भी मुझे नहीं मिलता है कि यह पूरी तरह से पृष्ठभूमि को क्यों हटाता है।

मेरा पसंदीदा समाधान:

background-image: linear-gradient(transparent, transparent);

यह वैध सीएसएस है और मैं समझता हूं कि यह कैसे काम करता है।

Comments

@BugWhisperer यह मेरे लिए iOS 12.4 में काम करता है: codepen.io/receter/pen/ymMzRG क्या आप अधिक विवरण प्रदान कर सकते हैं?

— एंड्रियास रिडमुएलर

मेरे लिए काम नहीं background-clip: padding-box !importantकिया , लेकिन काम किया।

— ओल्डबॉय

@BugWhisperer आप देख सकते हैं पर उदाहरण codepen.io/receter/pen/ymMzRG आप के लिए काम करता है? क्या आप भी कोशिश कर सकते हैं यदि background-image: linear-gradient(transparent, transparent) !important;आपके लिए काम करता है? मुझे यह जानकर खुशी होगी कि यहां क्या मुद्दा है।

— एंड्रियास रिडमुएलर

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

— Oldboy

Answer 5

जबकि स्वीकृत उत्तर एक अच्छी शुरुआत है, जैसा कि अन्य लोगों ने बताया है, यह केवल उन इनपुटों के लिए काम करता है जिनकी typeहै "text"। अन्य इनपुट प्रकारों के असंख्य हैं जो iOS पर टेक्स्ट बॉक्स के रूप में भी प्रस्तुत होते हैं, और इसलिए हमें इन अन्य प्रकारों को ध्यान में रखने के लिए इस नियम का विस्तार करने की आवश्यकता है।

यहाँ सीएसएस मैं इनपुट पाठ क्षेत्रों और आंतरिक छाया के टेक्स्टारस से छुटकारा पाने के लिए उपयोग कर रहा हूं, बटन, चेकबॉक्स, रेंज स्लाइडर्स, दिनांक / समय ड्रॉपडाउन और रेडियो बटन के लिए डिफ़ॉल्ट स्टाइल को संरक्षित करते हुए, जो सभी विनम्र का उपयोग करके भी लेखक <input>हैं। ।

textarea,
input:matches(
  [type="email"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="url"]
) {
  -webkit-appearance: none;
}

Answer 6

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

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