title: Set width of native html5 date and time pickers on iOS devices
body: <p>I'm using the native date and time pickers with type=date and type=time for the mobile version of a website I'm working on. The input fields are not respecting the css I have, though.</p>
  
  <p>Desktop:</p>
  
  <p><img src="https://i.stack.imgur.com/kyCZm.png" alt="Desktop"></p>
  
  <p>iOS devices:
  <img src="https://i.stack.imgur.com/YED8N.png" alt="enter image description here"></p>
  
  <p>Essentially I need the two date and time inputs to fill ~50% of the width. This is the html and css I'm using:</p>
  
  <pre><code>&lt;div class="arriveWrapper"&gt;
              &lt;div class="arriveDateWrapper fieldWrapper"&gt;
                  &lt;input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" /&gt;
              &lt;/div&gt;
              &lt;div class="arriveTimeWrapper fieldWrapper"&gt;
                  &lt;input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" /&gt;
              &lt;/div&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
  
  .arriveDateWrapper {
      width: 49%;
      margin-right: 2%;
      float: left;
      position: relative;
  }
  
          .arriveDate {
              width: 100%;
              height: 28px;
              -moz-box-sizing: border-box;
              -webkit-box-sizing: border-box;
              box-sizing: border-box;
          }
  
  .arriveTimeWrapper {
      width: 49%;
      float: left;
  }
  
      .arriveTime {
          width: 100%;
          height: 28px;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
      }
  </code></pre>
  
  <p>If anyone can tell me how to get the placeholders to show up when using the native date/time pickers that would be great, as well.</p>
  
  <p>Thanks!</p>