如何在不改變頂部圓形邊框形狀的情況下取消底部圓形邊框的樣式？

Question

我正在嘗試重新創建 Google。 當您專注於 Google.com 的搜索欄時，底部邊框將取消圓形邊框的樣式。 所以我嘗試通過將焦點設置為無樣式底部邊框半徑來實現此效果，但這會改變頂部邊框的形狀。

我寫的代碼大致是這樣的。

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>

<div class="rounded-[24px] bg-white px-3 focus-within:rounded-b-none">
      <input type="text" class="w-full outline-none" />
    </div>

Answer 1

我認為您需要在div和圓角上設置一個固定高度以匹配其中的一半。 喜歡：

<div class="h-screen w-full bg-slate-500 p-8">

  <div class="h-8 rounded-t-[1rem] rounded-b-[1rem] bg-white flex items-center px-3 focus-within:rounded-b-none">
        <input type="text" class="w-full outline-none" />
  </div>

</div>

在順風中， h-8等於 2rem。 我還使用 flex 在 div 中垂直居中輸入。

請參閱工作順風播放示例。