Материализация CSS Select с браузером по умолчанию на мобильном телефоне - PullRequest
Новая
       14

Материализация CSS Select с браузером по умолчанию на мобильном телефоне

0 голосов
/ 15 мая 2018

Я работаю над формой с помощью фреймворка Materialise CSS и испытываю трудности с тем, как окно выбора с классом браузера по умолчанию работает на мобильном телефоне. enter image description here

Как видно из изображения, поле выбора намного плотнее располагается в поле Zip по сравнению с остальными моими полями.

У меня есть несколько встроенных стилей, примененных к метке, и изрядное количествопользовательского CSS, чтобы помочь выровнять другие элементы и настроить цвет линий и стрелку в окне выбора, но я не смог определить, что отличается в этом случае.

В этом примере пользователь вводит свою улицу и почтовый индекс, затем город и штат отображаются с полем выбора для тех областей в США, которые могут использовать почтовый индекс.

Я безуспешно пробовал несколько вариантов моего CSS и даже медиа-запросы - однако, если пользователь изменяет размер окна браузера настольного компьютера, медиа-запросы начинают перемещать поле выбора нежелательными способами.Я в полном недоумении по поводу того, почему интервал такой разный только для одного окна выбора на планшетах и ​​телефонах.

Если кто-то знаком с такой проблемой и имеет решение, я, конечно, приветствую его.

Вот мой HTML-код: 

<div class="row ctyst" style="margin-bottom: -10px; display: block; margin-top: -10px;">
            <!--Residential City State Roll Down -->
                <div style="margin-bottom: 36px;" class="select-container">
                    <div id="home_city" style="margin-top: 8px;">
                        <label for="home_city" class="active" style="font-size: 16px; top: -5px; left: -4px;">City</label>
                        <select name="home_city" id="home_city" class="browser-default validate sbx xbsl chosen"><option value=""></option></select>
                    </div>
                    <p id="home_city_err" class="errp" style="display: none;"> </p>
                </div>        

                <div class="input-field">
                    <input type="text" name="home_state" class="" value="" readonly="" style="border-bottom: 2px solid #757575;">
                    <p class="errp" id="home_state_err" style="display: none;"> </p>
                    <label for="home_state" class="active">State</label>
                </div>
            </div>

Это CSSЯ использую в поле выбора и поля ввода: 

     select {
      padding: 6px;
      font-size: 16px;
      color: #585858;
      border: none;
      outline: none;
      border-bottom: 1px solid #9e9e9e;
      border-radius: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
     .select-container {
      position: relative;
      display: block;
    }
     .select-container:after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      pointer-events: none;
    }
     .select-container:after {
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      top: 15px;
      left: 312px;
      border-top: 8px solid #585858;
    }
     select::-ms-expand {
      display: none;
    }
     .chosen {
      border-bottom: 2px solid #757575;
    }
     .select-container {
      position: relative;
    }
     .select-container label {
      position: absolute;
      top: -15px;
      left: 0;
      font-size: 13px;
      color: #757575;
      transition: all 0.1s linear;
      margin-left: 5px;
    }
    input {
      font-size: 13px;
      color: #585858;
    }
    input:focus {
      outline: none;
    }
     .input-field input[type=text].valid,  
.input-field input[type=email].valid,  
.input-field input[type=tel].valid,  
.input-field input[type=password].valid {
        border-bottom: 1px solid #757575;
        color: #757575;
        font-size: 16px;
        box-shadow: 0 1px 0 0 #757575;
    }
...