iOS safari ignoring input padding when type is datetime-local

I'm trying to set an icon over an input of type datetime-local so I'm making the input take all the space of the container, putting some padding right to it and using position absolute to put the icon over the padding right area. I also set the overflow properties in the input so they don't go into the icon area.

This works great on all the browsers excepting in Safari from iOS (it works in Mac OS), for some reason the padding is ignored for type datetime-local. If I change it to type text it looks exactly as I want it to be.

This is the codepen with the case. You can open it in iOS and change the type to text to see the desired look.

Problem:

Problem Image

Desired:

Desired Image

https://codepen.io/jdmerinor/pen/qxzpOZ

HTML structure:

<div class="container">
  <input type="datetime-local" value="2017-06-01T08:30"/>
  <i>i</i>
</div>

Basic Styles:

.container{
  display: inline-block;
  position: relative;
  width: 100px;
  height: 22px;
}
i{
  position:absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  padding: 0 7px;
  box-sizing: border-box;
}
input{
  width: 100%;
  height: 100%;
  padding-right: 26px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-sizing: border-box;
  -webkit-appearance:textfield;
}

Thanks