डिजाइन
एक संवेदनशील डिजाइन पर संपर्क फार्म दोनों एक इनसेट छाया और नियमित रूप से बाहर छाया के साथ इनपुट फ़ील्ड है। नीचे छवि देखें।iPhone आईओएस बॉक्स छाया प्रदर्शित नहीं करेगा ठीक से
कोड
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:0px 0px 5px rgba(0, 0, 0, .25), inset 2px 2px 3px rgba(0, 0, 0, .2);
}
अंक
आईओएस v4 + बॉक्स छाया ठीक से प्रदर्शित नहीं करता है। नीचे छवि देखें।
मैं -webkit बॉक्स-छाया का उपयोग कर की कोशिश की है परीक्षण किया गया।
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
inset 2px 2px 3px rgba(0, 0, 0, .2);
मैंने इनपुट तत्व में display:block; लागू किया है।
वर्तमान वर्कअराउंड
मैं यह करने के लिए होने नहीं करना पसंद करेंगे, लेकिन यह एक ही रास्ता मैं अपने वांछित प्रभाव प्राप्त कर सकते है।
एचटीएमएल
<p><input /></p>
सीएसएस
p {
width:50%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-shadow:0px 0px 5px rgba(0, 0, 0, .35);
border-radius:4px;
}
input {
background:#fff;
height:auto;
padding:8px 8px 7px;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border:#fff solid 3px;
border-radius:4px;
box-shadow:inset 2px 2px 3px rgba(0, 0, 0, .2);
}
, iOS पर इनसेट छाया ठीक से प्रदान की गई नहीं है; लेकिन यह काफी करीब है।
मेरे प्रश्न
यह एक एकल तत्व में बॉक्स-छाया के अनेक उदाहरण सामने आना IOS उपकरणों पर ठीक से प्रस्तुत संभव है? यदि नहीं, तो इंसेट छाया के बारे में क्या? या क्या मैं इस संपत्ति और उसके मूल्यों का गलत इस्तेमाल कर रहा हूं?
अग्रिम धन्यवाद!
वाह, दिलचस्प समस्या और हमने प्रश्न स्वरूपित किया। मुझे जवाब नहीं पता, लेकिन अब मैं उत्सुक हूँ - मैं पीछा करूँगा। – RLH
ध्यान देने योग्य हो सकता है कि मैंने 'बॉक्स-छाया' के बिना परीक्षण किया और यह वही देखा। –