javascript - Input with Width 0 - Stack Overflow

admin管理员组

文章数量:1353272

I'm making a search bar but I dont want it like this. It is broken atm.

I should only see the span icon and when i hover it, the input should slide aligned with the span.

The problem is that I can't seem to hide the input. Why width: 0; doesn't work for the input?

.navbar {
background-color:#aaa
}

.search {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 22px;
}
.search button {
    height: 30px;
    position: absolute;
    right: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
}
.search button span {
    font-size: 1.2rem;
    color: #fff;
}
.search input {
    position: absolute;
    width: 0;
    float: Left;
    margin-left: 180px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    height: 30px;
    line-height: 18px;
    padding: 0 2px 0 2px;
    border-radius: 3px !important;
}

.search:hover input,
.search input:focus {
    width: 200px;
    margin-left: 0px;
}

<link href=".7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="navbar">
<div class="search">
  <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
  <button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>

I'm making a search bar but I dont want it like this. It is broken atm.

I should only see the span icon and when i hover it, the input should slide aligned with the span.

The problem is that I can't seem to hide the input. Why width: 0; doesn't work for the input?

.navbar {
background-color:#aaa
}

.search {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 22px;
}
.search button {
    height: 30px;
    position: absolute;
    right: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
}
.search button span {
    font-size: 1.2rem;
    color: #fff;
}
.search input {
    position: absolute;
    width: 0;
    float: Left;
    margin-left: 180px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    height: 30px;
    line-height: 18px;
    padding: 0 2px 0 2px;
    border-radius: 3px !important;
}

.search:hover input,
.search input:focus {
    width: 200px;
    margin-left: 0px;
}

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="navbar">
<div class="search">
  <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
  <button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 26, 2018 at 11:21 user9272082user9272082 2

• 2 you should remove the padding and border too when collapsed to fully hide the input – Sabaz Commented Jan 26, 2018 at 11:23
• opacity:0; for .search input and opacity:1; for .search:hover input . See the result below in my answer – Sviat Kuzhelev Commented Jan 26, 2018 at 11:33

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

You can go with visibility hidden and visible after hover.

Example for you code

.search input {
  visibility: hidden;
}

.search input:hover{
   visibility: visible;
}

You can solve it easy by adding the opacity 0/1 opacity:0; for .search input and opacity:1; for .search:hover input . See the result below

    .navbar {
    background-color:#aaa
    }
    
    .search {
        width: 230px;
        height: 30px;
        position: relative;
        line-height: 22px;
    }
    .search button {
        height: 30px;
        position: absolute;
        right: 0;
        margin: 0;
        background-color: transparent;
        border: 0;
    }
    .search button span {
        font-size: 1.2rem;
        color: #fff;
    }
    .search input {
        position: absolute;
        width: 0;
        float: Left;
        margin-left: 180px;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        height: 30px;
        line-height: 18px;
        padding: 0 2px 0 2px;
        border-radius: 3px !important;
        opacity:0; // <-- this
    }
    
    .search:hover input,
    .search input:focus {
        width: 200px;
        margin-left: 0px;
        opacity:1; // <-- and this
    }

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="navbar">
<div class="search">
  <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
  <button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>

You could create this effect using flexbox instead of absolute positioning.

For the input to be pletely hidden, you need to hide the border and padding initially, and add them back on hover.

.navbar {
  background-color: #aaa
}

.search {
  width: 230px;
  height: 30px;
  position: relative;
  line-height: 22px;
  display: flex;
}

.search button {
  margin: 0;
  background-color: transparent;
  border: 0;
}

.search button span {
  font-size: 1.2rem;
  color: #fff;
}

.search input {
  box-sizing: border-box;
  width: 0;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  line-height: 18px;
  padding: 0;
  border: 0;
  margin-left: 180px;
}

.search:hover input,
.search input:focus {
  width: 180px;
  margin-left: 0px;
  padding: 0 2px 0 2px;
  border: 2px inset;
  border-radius: 3px !important;
}

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="navbar">
  <div class="search">
    <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
    <button type="submit"><span class="fa fa-search"></span></button>
  </div>
</div>

I had the same issue input tag width:0px still showed the input tag with 1 or 2 pixel width.

It worked in some browsers but not Chrome or new Edge Chromium.

For my solution if I put the input in a div and set the div width:0px. It hid the input but still allow it to receive events (I need this because events do not work if you set the input to display:hidden, but want the input not to show)

Use keyframes and animations instead. https://www.w3schools./css/css3_animations.asp

.navbar {
background-color:#aaa
}

.search {
    width: 230px;
    height: 30px;
    position: relative;
    line-height: 22px;
}
.search button {
    height: 30px;
    position: absolute;
    right: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
}
.search button span {
    font-size: 1.2rem;
    color: #fff;
}
.search input {
    position: absolute;
    display:none;
    width: 0px;
    float: left;
    margin-left: 180px;
    -webkit-transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
    transition: all 0.7s ease-in-out;
    height: 30px;
    line-height: 18px;
    padding: 0 2px 0 2px;
    border-radius: 3px !important;
}

.search:hover input,
.search input:focus {
    margin-left: 0px;
    display:inline-block;
    animation-name: expand-search;
    animation-duration: 0.7s;
    width:200px;
}

@keyframes expand-search {
    from {width: 0px;}
    to {width: 200px;}
}

<link href="https://maxcdn.bootstrapcdn./font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div class="navbar">
<div class="search">
  <input type="text" class="form-control input-sm float-left" maxlength="64" placeholder="Search">
  <button type="submit"><span class="fa fa-search"></span></button>
</div>
</div>

本文标签： javascriptInput with Width 0Stack Overflow