Дизайн
Форма контакта на отзывчивом дизайне имеет поля ввода с тенью вставки и регулярной внешней тенью. См. Изображение ниже.
Код
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);
}
Проблема
iOS v4 + не отображает правильную коробку. См. Изображение ниже.
Проверено
Я попытался использовать -webkit-box-shadow.
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .25),
inset 2px 2px 3px rgba(0, 0, 0, .2);
Я применил display:block;
к элементу ввода.
Текущее обходное решение
Я бы предпочел не делать этого, но это единственный способ добиться желаемого эффекта.
HTML
<p><input /></p>
CSS
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 было правильно отображено несколько экземпляров тень коробок на одном элементе? Если нет, то как насчет вложенной тени? Или я неправильно использую это свойство и его значения?
Спасибо заранее!