IPhone / Safari इनपुट तत्व गोलाई को बंद करें

374

मेरी वेबसाइट iPhone / Safari ब्राउज़र पर एक अपवाद के साथ अच्छी तरह से प्रस्तुत करती है: मेरे पाठ इनपुट फ़ील्ड में एक अजीब गोल शैली है जो मेरी वेबसाइट के बाकी हिस्सों के साथ बिल्कुल भी अच्छी नहीं लगती है।

क्या सफारी को निर्देश देने का एक तरीका है (CSS या मेटाडेटा के माध्यम से) इनपुट फ़ील्ड को गोल नहीं करना है और उन्हें आयताकार रूप में प्रस्तुत करना है?

— एलेक्स
स्रोत

1

मुझे आश्चर्य है कि NO CSS रीसेट में ऐसा क्यों लगता है कि सुपर आसान सीएसएस नियम है। यह साहसी है।

— तोस्कान

1

मैंने वास्तव में एक एरिक रीसेट बनाया है जो कि एरिक मेयर्स के सीएसएस रीसेट 2 पर आधारित है, जो आपको यहां दिए गए उत्तर में मिल रहे आवश्यक सीएसएस के साथ है। यह github पर उपलब्ध है: github.com/Jossnaz/JossiCssReset

— Toskan

1

सावधान रहें -webkit-appearance: none;, मैं इस स्थिति को एक विशिष्ट इनपुट तत्व के दायरे में सीमित करना बेहतर समझता हूं। यदि आप उन्हें पृष्ठ पर रखते हैं, तो यह रेडियो इनपुट तत्वों को छिपा सकता है।

— क्वास

659

IOS 5 और बाद में, अच्छा ol ' border-radiusचाल करता है:

input {
    border-radius: 0;
}

यदि आपको केवल iOS पर गोल कोनों को निकालना चाहिए या किसी अन्य कारण से प्लेटफार्मों के पार गोल कोनों को सामान्य नहीं किया जा सकता है, तो -webkit-border-radiusइसके बजाय पूर्वनिर्मित संपत्ति का उपयोग करें, जो अभी भी समर्थित है। बेशक ध्यान दें कि Apple किसी भी समय उपसर्ग संपत्ति के लिए समर्थन छोड़ने का विकल्प चुन सकता है, लेकिन उनके अन्य प्लेटफ़ॉर्म-विशिष्ट सीएसएस सुविधाओं की संभावना पर विचार करते हुए वे इसे चारों ओर रखेंगे।

विरासत संस्करणों पर आपको -webkit-appearance: noneइसके बजाय सेट करना था:

input {
    -webkit-appearance: none;
}

— बोल्टकॉक
स्रोत

1

IOS 5 के रूप में, यह केवल आंतरिक छाया को हटा देगा। साथ ही गोल कोनों को हटाने के लिए पीयूष के उत्तर की जाँच करें।

— जोनाथन फ्रीलैंड

6

-webkit-appearanceवास्तव में आंतरिक छाया और गोल कोनों से कोई लेना-देना नहीं है। बस इसके लिए इसका इस्तेमाल न करें। css-infos.net/property/-webkit-appearance

— रुडी

13

"यदि आईओएस गोल कोनों और छाया चाहते हैं, तो आइओएस उपयोगकर्ताओं को उनके पास होने दें": यह मेरी स्थिति में पूरी तरह से अस्वीकार्य है, और शायद अन्य लोगों में भी।

— coredumperror

2

!! आपको इस विधि का उपयोग नहीं करना चाहिए, इससे चेकबॉक्स अनुपलब्ध लगता है। इस वजह से, मेरे कई साइट उपयोगकर्ता भुगतान समझौते में आगे नहीं बढ़ते हैं। !!

— सिंथेसिन

10

के लिए <input type="search">iOS पर 10 मैं अब भी जरूरत है -webkit-appearance: none;।

— गेब्रियल स्मोलजेर

54

input -webkit-appearance: none; अकेले काम नहीं करता है।

-webkit-border-radius:0px;इसके अलावा जोड़ने की कोशिश करें ।

— justadev
स्रोत

1

मुझे iOS 5 में गोल कोनों को हटाने के लिए -webkit-border-radiusविशेषता जोड़ने की आवश्यकता थी<input type="text">

— जोनाथन फ्रीलैंड

0 के बाद px जोड़ने की जरूरत नहीं है

— mintedsky

42

यह आईओएस में गोल को हटाने का सबसे अच्छा तरीका है।

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

नोट: कृपया इस कोड का चयन विकल्प के लिए न करें। यह हमारे चयन पर समस्या होगी।

— KoemsieLy
स्रोत

2

मैंने पाया है कि input[type]सभी इनपुट्स के लिए ट्रिक का उपयोग करना लगता है।

— जैकब डेव

11

स्वीकृत उत्तर रेडियो बटन क्रोम पर गायब हो गया। यह काम:

input:not([type="radio"]):not([type="checkbox"]) {
    -webkit-appearance: none;
    border-radius: 0;
}

— फ्रांकोइस रोमैन
स्रोत

7

यहाँ कम्पास (SCSS) का पूरा समाधान है:

input {
  -webkit-appearance: none;  // remove shadow in iOS
  @include border-radius(0);  // remove border-radius in iOS
}

— Johansrk
स्रोत

14

बस एक नोट, @include border-radius(0);मिक्सी केवल तभी उपलब्ध है जब आपने इसे स्वयं परिभाषित किया है या कम्पास फ्रेमवर्क का उपयोग कर रहे हैं, न कि केवल वेनिला एसएएस।

— waffl

बस एक नोट, यदि आप एससीएसएस का उपयोग कर रहे हैं, तो आपको शायद ऑटोप्रेफिक्सर का भी उपयोग करना चाहिए।

— ईसाई

6

मेरे लिए आईओएस 5.1.1 पर आईफोन 3 जीएस पर मुझे एक खोज क्षेत्र की स्टाइलिंग और इसे स्टाइल के लिए सेट करना था

input[type="search"] {-webkit-appearance: none; border-radius: 0 3px 3px 0;}

ऐसा करने से -webkit-border-radius: 0;अकेले देशी स्टाइल स्पष्ट नहीं किया। यह भी एक देशी ऐप पर एक वेबव्यू के लिए था।

— क्रिस बर्नार्डी
स्रोत

4

मुझे एक ही समस्या थी लेकिन केवल सबमिट बटन के लिए। आंतरिक छाया और गोल कोनों को हटाने की आवश्यकता -

input[type="submit"] { -webkit-appearance:none; -webkit-border-radius:0; }

— seanjacob
स्रोत

4

यदि आप normalize.css का उपयोग करते हैं, तो वह स्टाइलशीट कुछ ऐसा करेगी input[type="search"] { -webkit-appearance: textfield; }।

यह एकल वर्ग चयनकर्ता की तुलना में एक उच्च विशिष्टता है .foo, इसलिए ध्यान रखें कि आप तब ऐसा नहीं कर सकते .my-field { -webkit-appearance: none; }। यदि आपके पास सही विशिष्टता प्राप्त करने का कोई बेहतर तरीका नहीं है, तो इससे मदद मिलेगी:

.my-field { -webkit-appearance: none !important; }

— हेनरिक एन
स्रोत

4

कृपया इसे आजमाएं:

inputइस तरह सीएसएस जोड़ने की कोशिश करें:

 -webkit-appearance: none;
       border-radius: 0;

— इविन राज
स्रोत

3

मैंने एक साधारण सीमा-त्रिज्या का उपयोग किया: 0; पाठ इनपुट प्रकारों के लिए गोल कोनों को हटाने के लिए।

— जेसी
स्रोत

0

सफ़ारी और अन्य ब्राउज़रों पर बटन ठीक से प्रस्तुत करने के लिए, आपको वेबकिट-उपस्थिति को किसी से भी सेट करने के अलावा बटन के लिए एक विशिष्ट शैली देने की आवश्यकता होगी, जैसे:

border-radius: 0;
-webkit-appearance: none;
background-image: linear-gradient(to bottom, #e4e4e4, #f7f7f7);
border: 1px solid #afafaf

— CpnCrunch
स्रोत