使用圆角HTML/CSS搜索输入和列表项

初步情况： 我目前正在开发一个“搜索栏”。为此，我有一个输入和一些列表项作为搜索结果。这在javascript的帮助下工作，javascript搜索列表项。列表项直接显示在输入下

我的问题是： 我现在的问题是关于CSS。我想为搜索输入圆角，我可以做的边界半径。但我也希望在输入中键入内容时显示的搜索结果具有圆角。如果我给它们一个边界半径，它们都会分别显示圆角，这是我不想要的。因为这真的很难为我解释，请看我的截图

这正是我想要的，输入有4个圆角：

当在输入中键入某个内容时，搜索结果显示并在底部有圆角，而输入在顶部有圆角时，应该是这样的：

我的问题: 输入有4个圆角是怎么可能的？当输入内容时，圆角应该从输入的底部消失，并位于底部的最后一个搜索结果处

我的HTML代码：

<div class="wrapper"> 
<input type="text" id="myInput" onkeyup="search()" placeholder="Search for Topic ..." title="Type in a theme">

<ul id="myUL">
  <li><a href="#">School</a></li>
  <li><a href="#">Sports</a></li>
  <li><a href="christmas.html">Christmas</a></li>
  <li><a href="#">Office</a></li>
  <li><a href="#">Funny</a></li>
  <li><a href="#">Money</a></li>
  <li><a href="#">Food</a></li>
  <li><a href="#">Animals</a></li>
</ul>
</div>

---

可以使用以下工具分别控制每个角半径：

• 边框左上半径

• 边框右上半径

• 边框左下半径

• 边框右下半径

为了控制输入状态（基于其内容），必须使用一些javascript。下面的示例使用一个

open

类，该类根据内容添加/删除到输入中。应用时，此类将底角的半径设置为0

const searchInput=document.querySelector（'.search input'）；
searchInput.addEventListener（'input'，（）=>{
if（searchInput.value.trim（）=''）{
searchInput.classList.remove（'open'）；
返回；
}
searchInput.classList.add（'open'）；
});
。搜索输入{
填充：10px；
边界半径：20px；
}
.search-input.open{
边框左下半径：0；
边框右下半径：0；
}
谢谢您的回答。但我希望输入的边界半径在输入中键入内容后立即更改，从所有角的边界半径更改为顶部的边界半径。然后我需要一些javascript。编辑了我的答案，请检查它是否符合你的需要。谢谢你解决了我的问题。
#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: none; /* Add a border to all links */
  margin-top: -14px;
  background-color: #fff; /* Grey background color */
  padding: 12px; /* Add some padding */
  font-family: sans-serif;
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
  width: 255px;
  margin-left: auto; /* Center the list elements */
  margin-right: 15px;
}

  #myInput {
    background-image: url('searchicon.png'); /* Add a search icon to input */
    background-position: 10px 7px; /* Position the search icon */
    background-repeat: no-repeat; /* Do not repeat the icon image */
    width: 150px; /* 20%-width */
    font-size: 16px; /* Increase font-size */
    padding: 12px 20px 5px 40px; /* Add some padding */
    border: none; /* Add a grey border */
    border-radius: 20px;
  }