Safari macOS边框颜色

Question

对于我当前正在开发的网站，仅在Mac上，我就在Safari上遇到了一个非常大的问题。我的输入字段确实有边框。我不是在谈论众所周知的边界半径问题。但是，正如您在下图中所看到的，我的输入字段从野生动物园中得到了黑色边框。但是边界并没有消失。

我已经尝试了很多方法，覆盖了输入字段将从safari获取的css中的所有常规属性。

.search-posts-by-name {
  -webkit-appearance: none;
  border-radius: 0;
  width: 400px;
  grid-column: 2/3;
  grid-row: 2/3;
  border-style: none;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  height: 28px;
  background-color: #FAFAFA;
  align-self: center;
  margin-bottom: 20px;
  color: black;
  margin-top: 17.5px;
  margin-left: 75px;
  z-index: 3;
}

input.search-posts-by-name::placeholder {
  color: #263238;
  opacity: 0.6;
  text-align: left;
}

.form-control-email:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #1B5CB0 inset;
    -webkit-text-fill-color: white;
    background-position: 6px 12px;
}

.form-control-password:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #1B5CB0 inset;
    -webkit-text-fill-color: white;
    background-position: 6px 12px;
}

<input type="search" name="search-users" placeholder="Search posts by name" class="search-posts-by-name">

似乎没有任何效果。 希望你们能帮助我找出解决方法。 我正在使用Safari的最新版本。

更新：form-control-class与输入冲突，我不明白为什么，因为它专门针对该类。有人知道为什么吗？如何？