iOS ने गोल कोनों और ताकतों पर चकाचौंध कर दिया

Question

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

डेस्कटॉप:

आईपैड:

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

Comments

-वेबकिट-उपस्थिति: कोई नहीं; अधिकांश समस्याओं को समाप्त करने में मदद करता है, लेकिन यह अभी भी दो तत्वों या गोल कोनों के बीच की खाई को खत्म नहीं करता है। तो उस पर कोई मदद की सराहना की जाएगी। धन्यवाद।

— अकार्बनिक

आपने निर्दिष्ट -webkit-border-radius:none;किया क्या आपने निर्दिष्ट किया है border-radius:none;?

— रिगेल ग्लेन

निर्दिष्ट -webkit-appearance:noneऔर -webkit-border-radius:0मेरे लिए iOS पर चाल चली !

— प्राइमसु ०२०

Answer 1

मेरे पास काम करने वाला संस्करण है:

input {
    -webkit-appearance: none;
}

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

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

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

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

Comments

-वेबकिट-उपस्थिति: कोई नहीं; क्रोम में चेकबॉक्स छिपाता है - एक वैध समाधान नहीं!

— निको वेस्टरडेल

-वेबकिट-उपस्थिति: कोई नहीं; उसने चाल चली! (-वेबकिट-बॉर्डर-त्रिज्या की जरूरत नहीं)

— OZZIE

अच्छा बिंदु - ब्राउज़र संस्करण पर निर्भर करता है, मैंने पाया है, इसलिए यह बस एक असफल के लिए वहाँ है। मैं प्रासंगिकता के लिए पोस्ट संपादित करूंगा।

— मार्कशीट

इनपुट: नहीं ([प्रकार = "चेकबॉक्स"]) क्रोम में समस्या से बचने का एक बेहतर तरीका होगा? यद्यपि यह IE <= 8 में काम नहीं करेगा, लेकिन फिर से, यह वह नहीं है जिसे आप ठीक करने की कोशिश कर रहे हैं।

— रॉबिन फ्रेंच

उपयोग करने का input:not([type=checkbox]), input:not([type=radio])अर्थ है कि शैली सफारी के सभी बटन पर लागू होती है, क्योंकि प्रत्येक बटन उन दो स्थितियों में से एक को संतुष्ट करता है। इसके बजाय, मैंने इस्तेमाल किया input[type=submit], input[type=text]।

— मिगुएलमोरिन

Answer 2

आप इसके साथ कुछ और वेबकिट्स फॉर्म, इनपुट इत्यादि स्टाइल से छुटकारा पा सकते हैं:

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

Comments

इसे अभी भी border-radius: 0;पूरी तरह से रीसेट करने की आवश्यकता है, और सीमा-त्रिज्या नहीं चाहते हैं। और बस सेट border-radius।

— Refilon

Answer 3

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

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

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

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

इसने मेरे लिए काम किया।

Comments

FWIW, बस एक परियोजना पर इस मुद्दे था, और iPad 1 मैं भी <button>टैग करने के लिए शैलियों को जोड़ा गया था पर परीक्षण कर रहा था । इसलिए मुझे लगता है कि आप सीएसएस के साथ सीधे इसे हल करना बेहतर समझते हैं।

— नीमजी

Answer 4

normalize.css के लिए एक नज़र है

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

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; 
}

Answer 6

यदि आपके पास कुछ ब्राउज़र हैं, तो आपको यह समस्या भी आती है:

<a class="btn btn-primary" href="#" type="button">Link</a>

के बजाय:

<a class="btn btn-primary" href="#" role="button">Link</a>

यह तब हो सकता है जब आप अपने इनपुट तत्व को एंकर तत्व के लिए बदलते हैं और बदलने के typeलिए भूल जाते हैं role।

मुझे अपने आईपैड पर क्रोम और सफारी दोनों पर यह समस्या थी।