आईओएस बलों गोलाकार कोने और इनपुट पर चमक

Question

आईओएस डिवाइस फॉर्म इनपुट पर बहुत परेशान शैलियों को जोड़ते हैं, खासकर इनपुट [टाइप = सबमिट] पर। डेस्कटॉप ब्राउज़र पर और एक आईपैड पर एक ही सरल खोज फ़ॉर्म नीचे दिखाया गया है।

डेस्कटॉप:

आईपैड:

इनपुट [प्रकार = पाठ] एक सीएसएस बॉक्स छाया इनसेट का उपयोग करता है और मैं भी निर्दिष्ट -webkit-बॉर्डर-त्रिज्या: कोई नहीं; जो स्पष्ट रूप से ओवरराइड हो जाता है। मेरे इनपुट का रंग और आकार [टाइप = सबमिट] बटन आईपैड पर पूरी तरह से खराब हो जाता है। क्या किसी को पता है कि मैं इसे ठीक करने के लिए क्या कर सकता हूं? अग्रिम में धन्यवाद।

Answer 1

संस्करण मैं काम कर रहा था:

input { 
    -webkit-appearance: none; 
} 

कुछ वेबकिट ब्राउज़र संस्करणों में, आप भी border-radius अभी भी जगह में जा रहा है के साथ सामना किया जा सकता है। निम्नलिखित के साथ रीसेट:

input { 
    -webkit-border-radius:0; 
    border-radius:0; 
} 

यह सब वेबकिट को लागू करने के लिए बढ़ाया जा सकता है स्टाइल ऐसी input, select, button या textarea रूप form घटकों।

मूल प्रश्न के संदर्भ में, आप किसी यूनिट आधारित सीएसएस तत्व को साफ़ करते समय 'none' मान का उपयोग नहीं करेंगे। यह भी ध्यान रखें कि यह क्रोम में चेकबॉक्स छुपाता है, इसलिए शायद input[type=text] या input:not([type=checkbox]), input:not([type=radio]) जैसे कुछ का उपयोग करें।

Answer 2

normalize.css

लिए एक नज़र वहाँ एक डेमो जहां प्रपत्र तत्वों का परीक्षण और कैसे वे ios में की तरह लग रहे देख सकते हैं की है। कई वेबकिट उन्मुख गुण हैं।

Answer 3

सबमिट बटन के लिए उपयोग नहीं करते हैं:

<button type="submit" class="yourstylehere">Submit</button> 

यह मेरे लिए काम किया:

<input type="submit" class="yourstylehere" value="submit" /> 

इसके बजाय बटन टैग का उपयोग करें।

Answer 4

आप इस के साथ कुछ और webkits फार्म, इनपुट, आदि स्टाइल से छुटकारा पा सकते: कोई नहीं:

input, textarea, select { 
    -webkit-appearance: none; 
} 

Answer 5

यह वही मैं अपनी परियोजनाओं

* { 
    -webkit-tap-highlight-color: transparent; 
} 
a, article, div, h1, h2, h3, h4, h5, h6, img, section, span { 
    -moz-user-select: none; 
    -webkit-user-select: none; 
} 
input, select, textarea { 
    -webkit-appearance: none; 
    -webkit-border-radius:0; 
    border-radius: 0; 
}