मोबाइल सफारी (iPhone) पर textarea भीतरी छाया निकालें

Question

डिफ़ॉल्ट रूप से, ऐसा लगता है कि मोबाइल सफारी टेक्स्टरी सहित सभी इनपुट फ़ील्ड में शीर्ष आंतरिक छाया जोड़ता है। क्या इसे हटाने का कोई तरीका है?

यह विशेष रूप से बदसूरत है जब आपके पास एक सफेद पृष्ठभूमि है।

Answer 1

इस सीएसएस शैली को जोड़कर:

-webkit-appearance: none;

Comments

इनपुट प्रकार चेकबॉक्स और रेडियो बटन चयनकर्ताओं पर इस संपत्ति को जोड़ते समय सावधान रहें, क्योंकि यह चेकबॉक्स और रेडियो बटन छुपाता है;)

— ज़ैन शेख

उत्तर के लिए धन्यवाद ल्योन। Btw, इसका उपयोग करने का सबसे अच्छा तरीका केवल इसे लागू करना है textarea, input[type="text"], input[type="submit"]।

— jgthms

मत भूलो input[type="password"]।

— निक प्येट

भी मत भूलना [type="email"]!

— विलिस्टर

आप जिस प्रकार के इनपुट का उपयोग कर रहे हैं, उसके आधार पर नहीं ऑपरेटर का उपयोग करना आसान हो सकता है:input:not([type=checkbox]):not([type=radio])

— जस्टिन फिशर

Answer 2

सीएसएस शैली जोड़ते समय

-webkit-appearance: none;

काम करेगा, यह सब कुछ से छुटकारा दिलाता है। आप इसके बजाय यह कोशिश करना चाह सकते हैं:

box-shadow: none !important;

इस तरह आप डाउन-एरो रखते हैं।

Comments

सिर्फ बॉक्स-शैडो प्रॉपर्टी जोड़ने से काम नहीं चलता। आंतरिक छाया अभी भी आईओएस पर सफारी में दिखाई देती है।

— सिल्माउथ

Answer 3

यहाँ आसान उपाय है

input[type=text] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Answer 4

कभी-कभी आपके पास एक स्टाइलशीट हो सकती है appearance: none;ताकि इसे ठीक करने का एक तरीका टूट जाए जब ऐसा हो caret। सबसे अच्छा तरीका अपने कोड को फिर से लिखना होगा और यह पता लगाना होगा कि आपके कोड का क्या हिस्सा है, इसके लिए शैली को गड़बड़ाना हैnone

उपयोग caretकरने से पहले आपको यह जानना होगा कि यह आपको अन्य शैलियों के साथ कुछ परेशानी दे सकता है

-webkit-appearance: caret;
   -moz-appearance: caret;
     -o-appearance: caret;
        appearance: caret;

नोट: उपयोग none, caretइष्टतम नहीं है।

Answer 5

https://stackoverflow.com/a/51626446/9287284

background-clip: padding-box;

और मुझे यहाँ पर एक पुराने समान उत्तर वाली टिप्पणी मिली।

https://stackoverflow.com/a/29750016/9287284

Answer 6

टैग की या तो backgroundऔर borderसीएसएस गुण सेट करना inputभी काम करने लगता है।

इसे इस्तेमाल करे:

<style>
input {
    background: #ccc;
    border: none;
}
</style>

<form>
First name: <input type="text"/><br />
Last name: <input type="text" />
</form>

Comments

गलत और भ्रामक। कृपया पोस्ट करने से पहले सही डिवाइस पर अपने कोड का परीक्षण करें ...

— एरियल

वास्तव में गलत जवाब, इसके बारे में कुछ भी नहीं है जो ओपी के बारे में पूछते हैं

— जक्टा