title: Materialize CSS Select With Browser-Default On Mobile
body: <p>I'm working on a form with the Materialize CSS framework and I'm having a difficult time with the way a select box with the browser-default class is rending on mobile.<a href="https://i.stack.imgur.com/Y3zTa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y3zTa.png" alt="enter image description here"></a></p>
  
  <p>As you can see from the image, the select box sits much tighter to the Zip field compared to the rest of my fields.</p>
  
  <p>I have some inline styling applied to the label and a fair amount of custom css to help align other items and customize the color of the lines and the select box arrow, but I have not been able to determine what is different in this case. </p>
  
  <p>In this example, the user enters their street and zip code, then the city and state are reveal with a select box for those areas in the US that may share a zip code. </p>
  
  <p>I've tried several variations of my CSS with no success and even media queries - however, if a user resizes a desktop browser window the media queries start moving the select box in unwanted ways. I'm at a total loss as to why the spacing is so different for just that one select box on tablets and phones. </p>
  
  <p>If anyone is familiar with this kind of issue and has a solution, I'd certainly welcome it.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div class="row ctyst" style="margin-bottom: -10px; display: block; margin-top: -10px;"&gt;
              &lt;!--Residential City State Roll Down --&gt;
                  &lt;div style="margin-bottom: 36px;" class="select-container"&gt;
                      &lt;div id="home_city" style="margin-top: 8px;"&gt;
                          &lt;label for="home_city" class="active" style="font-size: 16px; top: -5px; left: -4px;"&gt;City&lt;/label&gt;
                          &lt;select name="home_city" id="home_city" class="browser-default validate sbx xbsl chosen"&gt;&lt;option value=""&gt;&lt;/option&gt;&lt;/select&gt;
                      &lt;/div&gt;
                      &lt;p id="home_city_err" class="errp" style="display: none;"&gt; &lt;/p&gt;
                  &lt;/div&gt;        
  
                  &lt;div class="input-field"&gt;
                      &lt;input type="text" name="home_state" class="" value="" readonly="" style="border-bottom: 2px solid #757575;"&gt;
                      &lt;p class="errp" id="home_state_err" style="display: none;"&gt; &lt;/p&gt;
                      &lt;label for="home_state" class="active"&gt;State&lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS I'm using on the select box and input fields:</p>
  
  <pre><code>     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;
      }
  </code></pre>