Html 位置宽度：绝对输入标签在iPad上不正确

我试图将一个输入元素放置在一个div中，并带有一个背景，我需要将其大小和位置设置为绝对值。它可以在PC上正常工作，但如果不使用完全不同的值，我就无法在iPad上正常工作

在PC上显示

在iPad上的外观

Html:

这两种风格适用于PC和iPad

---

有没有办法让两个输入字段正确地包含在两个平台上？

我还没有测试过，但我想这应该可以在两个设备上使用，因为我没有使用任何相对/绝对定位。相反，我只使用简单的CSS。这是html：

<div id="newContainer">
    <input class="input" type="text"/>
</div>

你可以在这里看到：

---

希望这有帮助

不幸的是，这不起作用。在iPad上，黄色的输入框延伸到div的右侧。。。我已经更新了我的小提琴，以使用填充物代替我的尝试。

#container{
    background-color: #343434;
    position: relative;
    width: 200px;
    height: 26px;
}

.input-pc {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 196px;
    height: 20px;
    background-color: #E8FB46;
    border: none;
}

.input-ipad {
    -webkit-appearance: none;
    -webkit-border-radius:0;
    position: absolute;
    left: 2px;
    top: 2px;
    width: 186px;
    height: 17px;
    background-color: #E8FB46;
    border: none;
}

<div id="newContainer">
    <input class="input" type="text"/>
</div>

* {
    margin:0;
    padding:0;
}

div {
    margin:20px 0 0 20px;
}
#newContainer{
    background-color: #343434;
    width: 200px;
    height: 23px;
    padding:1px 2px 0px 2px;
    border:0;
}

.input {
    width: 100%;
    height: 20px;
    background-color: #E8FB46;
    border: none;
}