Поле ввода стиля сложности для iPhone и iPad

Question

У меня проблема с оформлением формы поиска в виджете боковой панели. Мой веб-сайт здесь .

Я добавил несколько дополнительных CSS, например:

#is_widget-3 .search-field  {
  width: 70%;
  -webkit-border-radius: 4px !important;
  -moz-border-radius: 4px !important;
  border-radius: 4px !important;
}

#is_widget-3 .search-submit {
  text-shadow: none;
  font-style: normal;
  background: #d35438 !important;
  color: #000 !important;
  text-align: center;
  border: solid 1px white !important;
  border-radius: 4px;
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
  border: white 1px solid;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

Кнопка теперь выглядит как другие мои кнопки, и я доволен в браузере рабочего стола:

Проблема в том, что он отображается на портативном устройстве, таком как iPad:

Я не могу понять, как помешать полю поиска иметь эти закругленные углы. Я хочу, чтобы это выглядело как моя настольная версия. Не могу разобраться.

Answer 1

Вы можете попробовать использовать правило css @media для таргетинга на планшеты и телефоны.

Answer 2

Звучит как «проблема» мобильного Safari. Попробуйте добавить эти CSS правила в поле ввода:

-webkit-appearance: none;
-webkit-border-radius: 0;
border-radius: 0;