Радиус границы ввода iOS, кажется, не применяется к цвету фона

Question

глядя на эту страницу: http://acecontainerbuilder.com.dnnspeed.com/news-events.html вы увидите, если при использовании устройства iOS (iPad, iPhone) цвет фона ввода в левом нижнем углу будет отбрасываться через радиус границы. Кто-нибудь знает способ предотвратить это без использования изображений?

Answer 1

Попробуйте добавить -webkit-background-clip: padding-box; к стилю поля ввода.

Редактировать: если это не сработает, попробуйте -webkit-background-clip: content-box; или любое из этих свойств без значения -box.

Answer 2

Я только что столкнулся с этой же проблемой, и лучшее решение, которое я мог найти, - это обернуть элемент ввода в тег div и применить стили к элементу div вместо элемента input.

#sidebar div.search-wrapper {
    background-color:#fff;
    border-radius: 14px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) inset;
}

#sidebar input[type="text"] {
    background-color: transparent!important;
    box-shadow:none!important;
}

По какой-то причине мобильное сафари не учитывает радиус границы на элементах ввода, даже если настольное сафари есть.Странно.