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

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

但您使用的移动设备是什么？ Iphone还是android？你看，iphone上的chrome实际上使用safari渲染东西（从某种意义上说）。 Apple有圆形按钮，我们通常有方形按钮。只需使用border-radius:0;进行修复即可。 您也可能正在为iphone寻找-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;
}