css - 当搜索框有圆角时，CSS方法在自动完成下拉建议和输入搜索框之间实现实心连续线边缘？

标题、正文和图像现在应该更好地解释了。

我有以下搜索框，我想保持不变，有圆角：

现在，当用户使用一次搜索框时，自动完成功能会建议如下图所示的文本：

我现在在 CSS 中拥有的是这个

input {
  width: 100%;
  height: 38px;
  border-radius: 19px;
  padding: 0px 20px;
  font-size: 13px;
  color: #000;
  outline: none;
}

html 非常简单，如下所示：

<div class="wrapper">
 <fieldset>
  <input name="text" type="text" id="text" placeholder="Enter text..." required="">
 </fieldset>
</div>

根据评论中的用户建议，一个好的方法是将底部 2 个角的边框半径设置为 0，但是我不知道如何仅在自动完成出现时实现这一点，所以不是用户第一次使用输入搜索框。

这可以用 CSS 完成还是需要 Javascript？

谢谢一堆

标签： csssearchinputautocomplete

您可以使用border-radius具有多个参数的相同属性，其工作方式不同

input {
  width: 100%;
  height: 38px;
  border-radius: 19px 19px 0px 0px;
  padding: 0px 20px;
  font-size: 13px;
  color: #000;
  outline: none;
}