输入搜索表单在移动设备上显示圆角边框，但在桌面上不显示

Question

我有一个搜索表单，我编码只包括一个边框底部样式。在桌面上，它看起来像我想要的(第二张照片)，但在移动设备上，它显示了一个圆形的边框(第一张照片)。我在台式机和iOS手机上都使用Chrome...

​

​

​

.search-bar {
  height: 60px;
  padding:1em;
  outline: none;
}

#search {
  font-size: 2em;
  font-family: Linux Libertine;
  position: relative;
  top: 50%;
  left: 50%;
  padding: 30px;
  max-width: 600px;
  height: 60px;
  width: 100%;
  transform: translate(-50%, -50%);
  display: inline-block;
  border: 0;
  border-bottom: 5px solid black;
  background-color: #fff;
  color: #000;
  outline: none;
  border-radius: 0;
  box-shadow: 0;
}

input::placeholder {
  font-size: 1em;
  font-family: Linux Libertine, times;
  color: #D8D8D8;
}

<div class="search-bar">
   <input type="search" id="search" placeholder="Enter a keyword" class="keyword" />
</div>

​

Answer 1

但是你用的是什么手机呢？Iphone还是android？你看，iphone上的chrome实际上使用safari来渲染东西(在某种意义上)。苹果有圆形的按钮，而我们通常有方形的按钮。只需使用border-radius:0;修复即可。你可能也在寻找iphones版的-webkit-appearance: none;。我相信这也是苹果体验的一部分。

所以：

#search {
  font-size: 2em;
  font-family: Linux Libertine;
  position: relative;
  top: 50%;
  left: 50%;
  padding: 30px;
  max-width: 600px;
  height: 60px;
  width: 100%;
  transform: translate(-50%, -50%);
  display: inline-block;
  border: 0;
  border-bottom: 5px solid black;
  background-color: #fff;
  color: #000;
  outline: none;
  border-radius: 0;
  box-shadow: 0;
  -webkit-appearance: none;
}