Is it possible to set an input element height to 0?-CodePudding

I am using CSS transitions to change the height of an input element from 40px to 0px in hopes of making it disappear.

This effect works for images and looks decent but appears not to work for input elements.

However for input, it does not make it to 0px and disappear.

I would like to use CSS transitions to make an input slowly disappear. Is this possible?

Here is a fiddle of what an input looks like with height: 0px.

.search_bar_input {
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  width: 140px;
  background-color: rgba(255, 255, 255, 0);
  margin: 0 auto;
  position: relative;
  top: 6px;
}

#search_bar_input_show {
  height: 40px;
}

#search_bar_input_hide {
  height: 0px;
}

<input class="search_bar_input" id="search_bar_input_hide" name="search" type="text" placeholder=" Search" />

CodePudding user response：

You will have to reduce the padding and border of the input too:

.search_bar_input {
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  width: 140px;
  background-color: rgba(255, 255, 255, 0);
  margin: 0 auto;
  position: relative;
  top: 6px;
}

#search_bar_input_show {
  height: 40px;
}

#search_bar_input_hide {
  height: 0px;
  padding: 0px;
  border: 0px;
}

<input class="search_bar_input" id="search_bar_input_hide" name="search" type="text" placeholder=" Search" />

CodePudding user response：

I prefer transform: scale() in these cases, mostly because it actually works. Second, scale multiplies the size so you don't need to change height multiple times if needed.

~~Also, you [had] a typo in your HTML: className should be class.~~ (If you are using React then you're fine; thanks tacoshy).

var input = document.querySelector(".search_bar_input");
setInterval(() => {
  if (input.id === "search_bar_input_show") {
    input.id = "search_bar_input_hide";
  } else {
    input.id = "search_bar_input_show";
  }
}, 1000);

.search_bar_input{
  box-sizing: border-box;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #dddddd;
  width: 140px;
  background-color: rgba(255, 255, 255, 0);
  margin: 0 auto;
  position: relative;
  top: 6px;
  height: 40px;
  transition: transform 0.5s;
}
#search_bar_input_show{
  transform: scale(1, 1);
}
#search_bar_input_hide{
  transform: scale(1, 0);
}

<input
  class="search_bar_input"
  id="search_bar_input_show"
  name="search"
  type="text"
  placeholder=" Search"
/>

Also, using transform, you can also change transform-origin.