सफारी मोबाइल को इनपुट बटन गोल कोनों देने से रोकें

Question

मुझे लगता है कि विषय यह सब कहता है। Iphone, Ipod या Ipad पर देखे जाने पर मेरे पास एक वेब एप्लिकेशन है, इनपुट सबमिट बटन में गोल कोने हैं। क्या इसे रोकने का कोई तरीका है?

Answer 1

यदि आप जोड़ते हैं ...

input, textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

फिर आपके बटन किसी भी सीएसएस शैलियों को विरासत में प्राप्त करेंगे जो आपने अन्य ब्राउज़रों के लिए आवेदन किया है।

Comments

यह iPad2, iOS 5.1.1 पर काम नहीं करता है। मैं निश्चित नहीं हो सकता कि यह अन्य iOAS उपकरणों पर काम नहीं करेगा, हालाँकि, जब से मुझे इसके साथ कोई भी परीक्षण करने के लिए नहीं मिला है। हालाँकि, रोएल का -webkit-border-radius:0pxसमाधान काम करता है ।

— coredumperror

यदि आप -webkit- उपस्थिति लागू नहीं करते हैं: तो कोई भी सफारी उस संपत्तियों पर font-sizecolor

— अचार प्राप्त

यह पुष्टि करने के लिए कि यह समाधान iPad, iOS 5.1.1 के लिए काम करता है।

— डोमिनर नोवस

2 साल पुरानी टिप्पणी का जवाब देते हुए .... ठीक है। -वेबकिट-उपस्थिति: कोई नहीं; Chrome में दिखाई न देने के लिए चेकबॉक्स का कारण बनता है। संभवतः अन्य तत्वों और ब्राउज़रों को भी प्रभावित करता है।

— मैथ्यू_360

वाह!!! हम एक कॉर्डोवा ऐप में इसे ठीक करने के लिए घंटों खोज रहे थे और यह समाधान था! मैं इसे पर्याप्त नहीं बढ़ा सकता !!!

— Jay Dinse

Answer 2

मेरे लिए काम नहीं किया, -webkit- उपस्थिति: कोई नहीं।

यह करता है:

input[type=submit] {
    -webkit-border-radius:0px;
}

मेरे पास पृष्ठभूमि के साथ एक बटन पर गोल कोनों के साथ एक ही मुद्दा था, बस iPhone पर।

Comments

पुष्टि करना: यहां (डुपिक्सल द्वारा) सबसे अधिक वोट दिया गया जवाब काम नहीं करता है, लेकिन रोएल का जवाब है। यह संभवत: बीच के महीनों में ऐप्पल के मोबाइल वेबकिट कार्यान्वयन में किए गए बदलाव के कारण है।

— coredumperror

@CoreDumpError - इसका मतलब है कि यह आपके लिए काम नहीं करता है । समाधान ने मेरे लिए काम किया - मैंने इसे लागू किया है। सुनिश्चित नहीं हैं कि हम अलग-अलग परिणामों का अनुभव क्यों कर रहे हैं। फिर से, आपकी पोस्ट आधे साल पहले बनाई गई थी इसलिए मैं नहीं बता सकता कि क्या आप अभी भी उसी मुद्दे का अनुभव कर रहे हैं।

— डोमिनर नोवस

@ ठीक है, तुम बस पूर्वता मुद्दों हो सकता है ...?

— फ्रैंक नॉक

Answer 3

आप निम्नलिखित सीएसएस का उपयोग करने की कोशिश कर सकते हैं:

-webkit-appearance:none;

अधिक जानकारी: http://trentwalton.com/2010/07/14/css-webkit-appearance/

Answer 4

मैंने पाया है कि iPad 2 पर आपको निम्नलिखित का उपयोग करना होगा:

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

अपने बटन वर्ग में।

Answer 5

मेरे पास एक इनपुट सबमिट प्रकार = "छवि" वाली साइट थी। उपर्युक्त गोल कोनों की यह वैरिएशन:

input[type=image] {
    -webkit-border-radius:0px;
}

Answer 6

मैंने पाया है कि सेटिंग background: linear-gradient(color1, color2)से Apple डिवाइसों पर अत्यधिक गोल कोनों से छुटकारा मिलता है और अन्य सभी ब्राउज़रों / प्लेटफार्मों पर काम करता है जो मैंने कोशिश की हैं।

Comments

इसने मेरे लिए इसे ठीक कर दिया और यह मेरे लिए अनपेक्षित दुष्परिणामों के लिए सबसे कम संभावना वाला विकल्प प्रतीत होता है।

— विम डेलाउवे

Answer 7

मैंने "बटन" और "सबमिट" दोनों प्रकारों के लिए कोड जोड़कर हल किया:

   input[type="submit"] {
   text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }

    input[type="button"] {
        text-align: center;
        -webkit-appearance:none;
        -webkit-border-radius:0px;
        border-radius:0;
        height:30px;
    }