क्रोम/सफारी: सीमा निर्दिष्ट होने पर बॉक्स इनपुट केवल टेक्स्ट इनपुट पर दिखाई देता है

Question

मैं वेबकिट ब्राउज़र (क्रोम 15.0.एक्स और सफारी 5.1.1) के साथ एक समस्या में भाग रहा हूं जहां टेक्स्ट इनपुट पर बॉक्स छाया नहीं दी जा रही है । बस मौके से, मैंने पाया कि सीमा को स्पष्ट रूप से सेट करने से बॉक्स छाया को प्रस्तुत करने का कारण बनता है, भले ही आप सीमा को 'कोई नहीं' या डिफ़ॉल्ट, 'इन्सेट' पर सेट करते हैं। नीचे दिया गया कोड (इसे JSFiddle पर कार्रवाई में देखें) क्रोम या सफारी के साथ देखे जाने पर समस्या का प्रदर्शन किया, लेकिन यह फ़ायरफ़ॉक्स 6.0.2 और ओपेरा 11.52 में अपेक्षित के रूप में प्रस्तुत करता है।

एचटीएमएल

<input type="text" value="Works" style="border:none;" /> 
<input type="text" value="Works" style="border:inset;" /> 
<input type="text" value="Doesn't" /> 

सीएसएस

input[type="text"] { 
    margin: 1em; 

    -webkit-box-shadow: 0px 0px 2px 1px green; 
    box-shadow: 0px 0px 2px 1px green; 
} 

मैं WebKit में बॉक्स छाया का उपयोग कर या मैं एक बग पाया है की कुछ विस्तार से लापता है?

-webkit-appearance: textfield; 

यह तुम क्या चाहते है अगर आप पाठ क्षेत्र की उपस्थिति मंच पर निर्भर रहना चाहता हूँ:

Answer 1

input रों एक वेबकिट में, इस संपत्ति उन्हें डिफ़ॉल्ट रूप से करने के लिए लागू की है। कभी-कभी आप इसे अभी भी सेट के साथ स्टाइल कर सकते हैं, लेकिन दूसरी बार, इसे none पर सेट करने की आवश्यकता है, जो इसे मानक सीएसएस लागू करता है और ऑपरेटिंग सिस्टम पर कम निर्भर करता है। ऐसा लगता है कि border स्वचालित रूप से इसे ट्रिगर करता है, लेकिन box-shadow नहीं है, फिर भी box-shadow केवल तभी लागू होता है जब -webkit-appearancenone है। (तथ्य यह है कि मंच पर निर्भर उपस्थिति बंद कर दिया नहीं है, तो box-shadow आवेदन किया है और कि box-shadow गाया नहीं है, तो मंच पर निर्भर उपस्थिति एक बग हो सकता है सक्षम किया गया है है)

इसे ठीक करने के लिए, बस स्पष्ट रूप से यह नहीं बता

input[type="text"] { 
    -webkit-appearance: none; 
} 

Test it-webkit-appearance: none; साथ कहा: मंच पर निर्भर उपस्थिति का उपयोग करें।

इस का नकारात्मक पहलू आप (कुछ का) मंच के देशी देखो खो देते हैं, लेकिन आप box-shadow उपयोग करने के लिए कोशिश कर रहे हैं, तो आप दूर शैली के मूल निवासी वैसे भी देखने की कोशिश कर रहा हो सकता है।