संलग्न बटन के साथ बूटस्ट्रैप खोज इनपुट - सभी पक्षों पर गोलाकार कोनों को प्रदर्शित करना

Question

मैं Twitter Bootstrap का उपयोग कर रहा हूं।

यहां a fiddle with my code है। और यहाँ खोला Github Issue

---

मैं एक साथ जोड़ दिया बटन, per the Bootstrap docs के साथ एक खोज इनपुट को लागू किया है है। मेरे HTML फार्म के लिए यहां

<form class="form-search text-center" method="get" action="#"> 
    <div class="input-append"> 
    <input type="search" class="span7 search-query" name="q" autocomplete="off" placeholder="SEARCH" tabindex="1"> 
    <button type="submit" class="btn"><i class="icon-search icon-large"></i> </button> 
    </div> 
</form> 

किसी कारण से दिखाया गया है, खोज बॉक्स प्रकट होता है मोबाइल (यानी iPhone 5) पर प्रपत्र देखते समय के रूप में नीचे स्क्रीनशॉट में दिखाया गया है:

जब मैं देखने एक डेस्कटॉप ब्राउज़र में खोज फार्म और आकार बदलने के लिए यह "मोबाइल आकार," खोज बॉक्स प्रकट होता है करने के लिए सही ढंग से के रूप में यह दूसरा स्क्रीनशॉट में दिखाया गया (उपेक्षा हल्का सीमा और आकार अंतर):

--------- प्रश्न ---------

कैसे मैं पहली बार स्क्रीनशॉट में के रूप में गलत तरीके से प्रदर्शित करने से खोज इनपुट रोका जा सकता है? और यह क्या हो सकता है? मैंने खोज इनपुट दोनों के लिए स्रोत और गणना की शैलियों को देखा है, और सबकुछ एक जैसा प्रतीत होता है। मदद?

यदि मैं input type="search" से type="text" बदलता हूं तो समस्या मौजूद नहीं है, इसलिए इसे सीएसएस में कहीं भी होना चाहिए, लेकिन मैं इसे समझ नहीं सकता। वास्तव में क्या सीएसएस इस प्रभाव को लागू करता है?

--------- अद्यतन ---------

अगर मैं <div class="input-prepend"> करने के लिए <div class="input-append"> स्विच खोज इनपुट सही ढंग से प्रदर्शित करता है। साथ ही, जब फ़ील्ड फोकस कर लेता है, तो दाईं ओर गोलाकार कोने "वर्ग" बदल जाता है और सही ढंग से दिखाई देता है।

Answer 1

ऐसा लगता है कि आप नहीं कर सकते हैं। इस लिंक

webkit html5 search inputs

बोली देखें:

वेबकिट आप एक खोज इनपुट पर बदलाव कर सकते हैं पर बड़ा समय प्रतिबंध है। मुझे लगता है कि विचार स्थिरता है। सफारी में विशेष रूप से, खोज फ़ील्ड ब्राउज़र के ऊपरी दाएं भाग में खोज बॉक्स की तरह दिखते हैं। निम्नलिखित सीएसएस को वेबकिट में "कोई फर्क नहीं पड़ता" में अनदेखा कर दिया जाएगा, जैसा कि आप इसके खिलाफ भी लड़ सकते हैं! महत्वपूर्ण नियम।

दूसरे शब्दों में, सफारी आपकी शैलियों को अनदेखा कर देगा, और मानक रूप लागू करेगी।