Javascript 是否可以将表单输入设置为0px高度？

我使用CSS转换使表单出现和消失。但是它们不起作用。我希望表单/表单输入在达到0px高度时消失

但它的高度似乎仍在4倍左右

这适用于简单的div，但由于某些原因，似乎不适用于表单

下面是我想转换到的基本情况

HTML

<form id="search_bar_form">
  <input
    id="search_bar_input"
    name="search"
    type="text"
    placeholder=" Search"
    value="test"
  />
</form>

---

使用

overflow:hidden

和

height:0px

防止错误渲染：

#搜索栏(表单){
高度：0px；
溢出：隐藏；
}

#搜索栏(输入){
高度：0px；
填充：0；
保证金：0；
边界：无；
}

框大小：边框框

可能会起作用，但这不是一个很好的方法来达到你想要的效果。你问的有点困惑。您是否正在尝试使用CSS转换平滑折叠

？

#search_bar_form{
  height: 0px
}
#search_bar_input{
  height: 0px;
}