Как сделать так, чтобы кнопка выглядела одинаково на всех устройствах в css? - PullRequest
Новая
       49

Как сделать так, чтобы кнопка выглядела одинаково на всех устройствах в css?

0 голосов
/ 08 октября 2018

Я работаю над сайтом, на котором я хочу, чтобы кнопка поиска выглядела одинаково на всех мобильных и планшетных устройствах .Для этого я создал скрипку .Код, который я использовал для кнопки поиска (для мобильного телефона или планшета) : 

@media only screen and (max-width: 767px) {
  #gv_search_button_2777 {
    padding-left: 5.5%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    padding-right: 5.5%;
    background-color: white;
    font-size: 12px;
    border-radius: 3.5px;
    border: 1px solid #ccc!important;
  }
}
<div class="gv-search-box gv-search-box-submit">
  <input type="hidden" name="mode" value="all">
  <input type="submit" class="button gv-search-button" id="gv_search_button_2777" value="Search">
</div>

Постановка задачи:

Если я возьму выше скрипку в мобильном представлении изна самом деле браузер выглядит хорошо, но если я вижу его на своем телефоне, он выглядит иначе.

Вот снимок экрана для кнопки «Поиск», которую я хочу просмотреть на всех мобильных устройствах:

search button

Мне интересно, какие изменения мне нужно внести в коды CSS в моей скрипке, чтобы приведенный выше скриншот присутствовал на всех устройствах.

На моем iphone, когда проверено на Safari и Chrome, я вижу это (что не так):

enter image description here

1 Ответ

0 голосов
/ 08 октября 2018

Вы можете установить appearance: none, чтобы указать iOS Safari (и другим) не применять собственный стиль ОС к элементу: 

.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Оттуда вы можете сбросить атрибуты таблицы стилей браузера (например, поля, отступы,и т. д.) и применяйте свои собственные стили.

...