显示角半径div的白色像素

Question

我网站上的表单中有两个输入字段。我设计它们只有bottom-border并应用了以下其他css：

input {
    -webkit-appearance: none;
    appearance: none;
    border: none;
}

.loginTextField {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    border-bottom: 2px solid white;
    outline: none;
}

文本字段在HTML中显示如下:(另请注意，文本字段后面没有相同大小的div。）

<input type="email" class="loginTextField" id="loginEmail">

目前，即使只设置了底部边框，Safari也会按照以下方式渲染文本字段 - 请注意具有这些白色像素的顶角：

（在这个上更容易看到）

另一方面，Chrome会根据需要呈现它们：

我知道，之前已经问过similar question。但是，所提出的解决方案都不适合我。

我已经尝试过这样的事情：

border: 0 solid transparent;
border-bottom: 2px solid white;

和

border-top: 0 solid transparent;
border-right: 0 solid transparent;
border-bottom: 2px solid white;

......没有运气。

但我确实注意到，将bottom-border-color更改为绿色也会将这些额外像素更改为该颜色。

查看此工作JSFiddle example。

有没有办法让Safari不渲染那些白色像素？

Answer 1

我在父元素中添加了box-shadow: inset 10px 10px #000;

之前：

之后：