输入宽度为0

Question

我正在制作一个搜索栏，但我不想这样。它被打破了。

我应该只看到跨度图标，当我将鼠标悬停时，输入应该与跨度滑动对齐。

问题是我似乎无法隐藏输入。为什么width: 0;不适用于输入？

.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.com/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>

Answer 1

您可以通过为opacity:0;添加不透明度0/1 .search input和opacity:1;添加.search:hover 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;
        opacity:0; // <-- this
    }
    
    .search:hover input,
    .search input:focus {
        width: 200px;
        margin-left: 0px;
        opacity:1; // <-- and this
    }

<link href="https://maxcdn.bootstrapcdn.com/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>

Answer 2

您可以在悬停后隐藏和显示可见性。

Example for you code

.search input {
  visibility: hidden;
}

.search input:hover{
   visibility: visible;
}

Answer 3

改为使用关键帧和动画。 https://www.w3schools.com/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.com/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>

Answer 4

您可以使用flexbox而不是绝对定位来创建此效果。

要完全隐藏输入，您最初需要隐藏border和padding，并在悬停时重新添加它们。

.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.com/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>

Answer 5

我遇到了同样的问题input标签width:0px仍然显示input标签，其宽度为1或2像素。

它在某些浏览器中有效，但不适用于 Chrome 或新的 Edge Chromium 。

对于我的解决方案，如果我将input放在div中并设置div width:0px。 它隐藏了input，但仍允许它接收事件（我需要这样做，因为如果将input设置为display:hidden，但是事件input不起作用，则事件将不起作用显示）