Question

我正在使用Materialize CSS框架处理表单，并且我很难用浏览器默认类的选择框在移动设备上进行渲染。 < / p>

从图像中可以看出，与其他字段相比，选择框比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;
    }

使用浏览器实现CSS选择 - 默认在移动设备上

0 个答案: