如何在css中点击搜索图标时扩展小方形输入框？答案

【问题标题】：How to expand small square input box on hitting search icon in css?如何在css中点击搜索图标时扩展小方形输入框？
【发布时间】：2018-04-10 16:01:46
【问题描述】：

我有一个带有搜索图标的搜索栏，如fiddle 和下面的屏幕截图所示。

我用来制作搜索图标和方形边框的 HTML 和 CSS 代码是：

HTML：

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

CSS：

.back{
  padding: 0.5%;
  background: #10314c;

}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now {
    width: 50%;
}

问题陈述：

如果我点击搜索图标，搜索图标周围的小方形输入框（在屏幕截图中用箭头标记）应该会像here一样展开。

这是我更新后的fiddle，它几乎可以正常工作但是这两件事我不知道该怎么做：

方格在击中外部任意位置后都应该回到原来的位置。
当白色方形边框展开时，内部背景应为白色。

对如何做到这一点有什么想法吗？

【问题讨论】：

看看这个：jsfiddle.net/p8zrst2p/48。我摆弄了你的演示，以最小的方式解决你的问题。
@kleinfreund 嘿，这一切看起来都不错。我认为在逻辑上有意义的一件事是 - 如果你看看这个example。如果您在搜索文本框内单击，则该搜索图标之后的行会一直闪烁，但在您的示例中（在我的示例中也是如此），该闪烁行发生在搜索图标之前？这是否可以按照 w3schools 中的方式进行，以便在搜索图标后出现闪烁线？
我再次更新了演示。它仍然很粗糙，但也许你可以从中学到一些东西：jsfiddle.net/p8zrst2p/55。
@user5447339 如果我的回答对你有帮助，请采纳

标签： javascript html css font-awesome

【解决方案1】：

这是更新的小提琴link

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   pointer-events:none; /*Add this to ur css*/
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand:focus {
  width: 50%;
  background: white;
}
.extand:focus + span{  /*hide icon*/
  display:none;
}

无需添加javascript。点击input，它会获得focused，可以在css中使用它来定位它并为其添加宽度，当你点击外部时，输入会失去焦点并返回到原始大小

【讨论】：

【解决方案2】：

您可以为input 和icon 元素创建一个父元素，这样您就可以将icon 定位为相对于该父元素的绝对位置。

然后您还可以创建一个类，例如active，您可以在输入时切换focus 和blur 事件，但该类将在该父元素上发生变化。然后基于该类，您可以设置输入和图标的样式。

请注意，如果您想更改 % 而不是 px 中的输入，则该宽度将取决于父元素。因此，如果您希望在同一行中的其他元素与您的 form 元素相同，那么您应该在 px 中使用 width，就像这样 DEMO

$(".form-field input").on('focus blur', function() {
  $(this).parent().toggleClass('active');
})

.back{
  padding: 10px;
  background: #10314c;
}
.form-field {
  position: relative;
}
.form-field i {
  transition: all 0.2s ease-in;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  left: 10px;
  top: 50%;
}
.form-field input {
  transition: all 0.2s ease-in;
  background: transparent;
  border: 1px solid white;
  border-radius: 4px;
  padding: 5px 10px 5px 30px;
  color: white;
  width: 120px;
}
.form-field.active i {
  color: black;
}
.form-field.active input {
  background: white;
  color: black;
  width: 50%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="back">
  <div class="form-field">
    <i class="fa fa-search searchicon" aria-hidden="true"></i>
    <input placeholder="Search..." type="text" name="search" class="extand ">
  </div>
</form>

如果您只想在icon 上切换活动类点击并在输入blur 事件上删除它，然后您可以使用 jquery 将元素聚焦在mouseup 事件上。

$(".form-field i").on('mousedown', function(e) {
  $(this).parent().toggleClass('active');
})

$(".form-field i").on('mouseup', function(e) {
  $(this).next('input').focus()
  if (!$(this).parent().hasClass('active')) {
    $(this).next('input').blur()
  }
})

$(".form-field input").on('focus', function(e) {
  if (!$(this).parent().hasClass('active')) {
    $(this).blur()
  }
})

$(".form-field input").on('blur', function(e) {
  $(this).parent().removeClass('active')
})

.back{
  padding: 10px;
  background: #10314c;
}
.form-field {
  position: relative;
}
.form-field i {
  transition: all 0.2s ease-in;
  color: white;
  position: absolute;
  transform: translateY(-50%);
  left: 15px;
  top: 50%;
}
.form-field input {
  transition: all 0.2s ease-in;
  background: transparent;
  border: 1px solid white;
  border-radius: 4px;
  padding: 5px 10px 5px 35px;
  color: white;
  width: 0;
}
.form-field.active i {
  color: black;
  display: block;
}
i:hover {
  cursor: pointer;
}
.form-field.active input {
  background: white;
  color: black;
  width: 300px;
}
.other {
  color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="back">
  <div class="form-field">
    <i class="fa fa-search searchicon" aria-hidden="true"></i>
    <input type="text" name="search" class="extand ">
  </div>
</form>

【讨论】：

【解决方案3】：

我认为你不会使用 javascript，你应该依赖可以在 css 中使用的焦点来定位它并为其添加宽度，当你点击外部时，输入变得不集中并返回到原始大小

input{
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url(https://i.imgur.com/MACjo6S.png);
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input:focus {
    width: 100%;
}

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

【讨论】：

【解决方案4】：

您提供给 smialar example 的链接确实有一个图标，但是图标图像存在于 Css 中而不是 HTML 中，因此一旦您单击输入或图标，它就会动画。

就你的代码而言，它存在于html中，所以我没有工作，

解决方案：

要么在css 中包含图标（图像）作为输入的背景图像属性。（我将由您决定如何弄清楚如何做到这一点，因为您有链接和示例；）
你包含一些 JavaScript(JQuery)，我相信 Jquery 在这种情况下是最简单的

HTML：

    <form class="back">
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search" class="extand ">
    </form>

CSS：

.back{
   width: 50%;
   background: #10314c;   
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }

.extand {
   width: 10%;
   box-sizing: border-box;
   border: 2px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
   background: #10314c;
   background-position: 10px 10px;
   background-repeat: no-repeat;
   -webkit-transition: width 0.4s ease-in-out;
   transition: width 0.4s ease-in-out;
}
.extand-now {
   width: 100%;
}

JQuery： 包括 Jquery 3.1.1 slim 重要

// for the icon
$(".searchicon").click(function() {
  $('.extand').toggleClass('extand-now');
});
// for the input
$(".extand").click(function() {
   $('.extand').toggleClass('extand-now');
});

这是演示示例：Click here

如果你想继续搜索，当然有很多不同的方法

【讨论】：

感谢您的回答和代码。我尝试使用上述代码，但不知何故它不起作用。我想知道你是否可以在小提琴中更新它。
我只是编辑它，它的工作我不好是输入中的类，我刚刚修复它
我又试了一次。你可以在小提琴中更新它吗？由于某些原因，它无法在我的电脑上运行。
fiddle 已包含在答案的末尾，如果您觉得此答案有帮助，请将其标记为已回答
我刚刚修改了它，我想这是你想要的，我理解的，我希望就是这样。

【解决方案5】：

我认为您不想使用 JavaScript。从您提供的代码中，您只需将 :focus 选择器添加到您的扩展类。我希望这会有所帮助。

.back{
  padding: 2%;
  background: #10314c;
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 35px;
   left: 25px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 10%;
    height:45px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    padding: 12px 20px 12px 45px; 
    color: white;
}

.extand:hover{
    cursor:pointer;
}

.extand:focus {
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand">
</form>

【讨论】：

【解决方案6】：

你需要修改你的 jQuery

它将消除您在任意位置单击文档并更改输入字段的背景颜色时的展开效果。

$(document).click(function(e){
// this line will check if the user has click on search icon or input
   if( $(e.target).hasClass('searchicon') || $(e.target).hasClass('extand'))   {  
   // this will toggle class and add background css
    $('.extand').toggleClass('extand-now').css('background-color','white');
   
   } else {
   // this will remove class if user click anywhere outside the input field or search icon and set background css
   $('.extand').removeClass('extand-now').css('background-color','#10314c');
   }
});

.back{
  padding: 0.5%;
  background: #10314c;
    
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   }
   
.extand {
    width: 2.4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.extand-now {
    width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

工作小提琴here

【讨论】：

【解决方案7】：

您可以尝试将 :hover 和 :focus 选择器添加到您的扩展类。我希望这会有所帮助

.back{
  padding: 2%;
  background: #10314c;
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 30px;
   left: 20px;
   color: white;
   z-index: 2;
   }

.extand {
    width: 12%;
    height:40px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
    padding: 12px 20px 12px 40px;
 
}

.extand:hover {
    cursor: pointer;
}

.extand:focus {
    width: 100%;
    background-color: #fff;
}

.extand:focus + .searchicon {
    color: black;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand">
</form>

【讨论】：

【解决方案8】：

HTML：

<form class="back">
     <input type="text" name="search" class="extand " placeholder="&#x1F50D; Search for something">
</form>

CSS：

    *{
        margin:0;
    }

    .back{
      padding: 0.5%;
      background: #10314c;

    }

    .searchicon {
       float: left;
       margin-top: -20px;
       position: relative;
       top: 26px;
       left: 8px;
       color: white;
       z-index: 2;
       }

    .extand {
        width: 2.4%;
        box-sizing: border-box;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        background: #10314c;
        background-position: 10px 10px;
        background-repeat: no-repeat;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;

        padding:5px;
    }

/*use :focus to expand the input field (search bar) on focus*/

    .extand:focus{
        background-color:#fff;
        color:black;
        width:40%;
    }

这是一个 jsFidde：https://jsfiddle.net/r5kLh7p6/3/

希望对您有所帮助。

【讨论】：

【解决方案9】：

您可以将 CSS :focus 与 transition 一起使用。但首先你需要设置初始值

#ellipsis {
    top: 12px;
    position: absolute;
    right: 20px;
}
#ellipsis:focus {
	outline: none;
}
#ellipsis:focus + .dropdown {
	display: block;
}


input[type=text] {
    width: 50%;
    background: #10314c;
    transition: 1s;
}
input[type=text]:focus {
    width: 100%;
    background: #10314c;
    transition: 1s;
}


.dropdown {
	background-color: lightblue;
	display: none;
	position: absolute;
	height: 150px;
	right: 0;
	width: 200px;
	z-index: 10;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    z-index: 2;
}

<div class="nav-top-searchbar">
    <form>
        <span class="fa fa-search searchicon" aria-hidden="true"></span>
        <input type="text" name="search">
				<div style="">
					<img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
					<div class="dropdown">
						insert your stuff here
					</div>					
				</div>
        

    </form>
</div>


<div class="body-manage-attendees">
    <div class="container-fluid">

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Name
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                Number
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                Table
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Amanda Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Andy Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                1
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                No Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Cameron Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                No Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Dana Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                53
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                5
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Absent
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Eve Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Absent
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe's Guest1
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe's Guest 1
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                15
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                No Bill
            </div>
        </div>



        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe's Guest 2
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                16
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                5
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Lydia Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-sm-4 col-lg-4" style="background-color:white;">
                Noah Doe
            </div>
            <div class="col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Meena Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Brenda Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                1
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Cameron Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Brenda Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                14
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                1
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>


        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Cameron Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                2
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Noah Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Bill
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Dana Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                53
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                5
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Unpaid
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Eve Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Items Received
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Items Received
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Fred Doe's Guest1
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Items Waiting
            </div>
        </div>

        <div class="row">
            <div class="col-4 col-sm-4 col-lg-4" style="background-color:white;">
                Jack Doe
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                250
            </div>
            <div class="col-3 col-sm-3 col-lg-3" style="background-color:white;">
                4
            </div>
            <div class="col-2 col-sm-2 col-lg-2" style="background-color:white;">
                Unpaid
            </div>
        </div>

    </div>

</div>

https://jsfiddle.net/kiidkupy/nc2djn5p/65/

【讨论】：

感谢您的回答。我试过你的代码，但没有用。你能在小提琴中更新吗？这样，我就可以在小提琴上进行测试了。
我检查了你的小提琴。你检查我的问题陈述了吗？我已经提到了那里的链接。它应该以某种方式工作，如果我点击搜索图标，它应该会扩展。我在你的小提琴中看不到任何扩展。
另外，扩展应该发生在搜索栏下方。

【解决方案10】：

这是搜索图标展开的解决方案，
JSfiddle 演示 - JSFiddle

CSS（只添加了这部分） -

.search {
  border: 1px solid red;
  position: relative;
    transition: 0.2s linear;
    width: 85%;
}

.search.toggle-off {
    width: 22px;
    transition: 0.2s linear;
}

.search .searchicon {
  position: absolute;
  right: 0;
  width: 22px;
  background: red;
  color: white;
  border: 1px solid #FFFFFF;
  z-index: 2;
  padding: 3px;
}

.search input[type=text] {
  width: calc(100% - 22px);
  background: #10314c;
}

HTML (只编辑这部分) -

<div class="search toggle-off">
  <span class="fa fa-search searchicon" aria-hidden="true"></span>
  <input type="text" name="search">
</div>

JS -

var searchicon = document.querySelector(".searchicon"),
search = document.querySelector(".search");

searchicon.addEventListener("click", function(){
    if(search.classList.contains("toggle-off")){
        search.classList.remove("toggle-off");
    }
    else{
        search.classList.add("toggle-off");
    }
});

【讨论】：

【解决方案11】：

我想这就是你想要的

.back{
  padding: 0.5%;
  background: #10314c;
    
}

.searchicon {
   float: left;
   margin-top: -20px;
   position: relative;
   top: 26px;
   left: 8px;
   color: white;
   z-index: 2;
   /* Allows focusing the input element *through* the search icon */
   pointer-events: none;
}
   
.extand {
    width: 4%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    padding-left:30px;
    border-radius: 4px;
    font-size: 16px;
    background: #10314c;
    background-position: 10px 10px;
    background-repeat: no-repeat;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

.extand:focus {
    width: 50%;
    background-color: #fff;
}

.extand:focus + .searchicon {
  color: black;
}

<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extand ">
</form>

【讨论】：

【解决方案12】：

我希望这对你有用：

如果你不介意我已经改变了你元素的顺序

我只使用了 CSS 来实现这个结果。

.back {
  padding: 0.5%;
  background: #10314c;
}

.searchicon {
  float: left;
  margin-top: -22px;
  position: relative;
  top: 26px;
  left: 8px;
  color: white;
  z-index: 2;
  width: 18px;
  pointer-events: none;
}

.extand {
  width: 30px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: #10314c;
  color:#10314c;/* I have used same color as the background so after the search the text will not visible to the user */
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  cursor: pointer;/* Set curson pointer so the user think it's a button of search */
}

.extand:focus,
.extand:active {
  width: 50%;
  cursor: text;/* To change the curson to text */
  background: #fff;
  outline: none;
}

.extand:focus+.searchicon,
.extand:active+.searchicon {
  display: none;/* this will hide the search icon on click of the input */
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<form class="back">
  <input type="text" name="search" class="extand ">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
  </span>
</form>

我认为上面的代码将满足您的所有需求。如果还有什么问题，请发表评论，我会尽力帮助你。

【讨论】：

【解决方案13】：

可以这样完成

.back {
  padding: 0.5%;
  background: #10314c;
}

.searchicon {
  float: left;
  margin-top: -20px;
  position: relative;
  top: 24px;
  left: 8px;
  color: white;
  z-index: 2;
}

.extend {
  width: 24%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background: #10314c;
  background-position: 10px 10px;
  background-repeat: no-repeat;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

.extend:focus {
  width: 50%;
  background: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<form class="back">
  <span class="fa fa-search searchicon" aria-hidden="true"> 
</span>
  <input type="text" name="search" class="extend ">
</form>

【讨论】：

【解决方案14】：

我修改了你的“更新”小提琴以获得这个结果：

https://jsfiddle.net/p8zrst2p/98/

我只修改了一点 CSS（图标的颜色和宽度），
然后使用 CSS :focus 选择器，如下所示：

.extand:focus {
    width: 50%;
    background: #fff;
}

在我看来，使用:focus 选择器是实现您想要的更简单和正确的方法。

然后……我一开始想把 JS 去掉，但最后我是这样用的：
单击图标将焦点设置在输入上，以便应用上面的 CSS。就是这样。

// Focus input when icon clicked
$(".searchicon").click(function() {
  $('.extand').focus();
});

这就是你想要的样子吗？
希望对你有帮助。

【讨论】：

【解决方案15】：

您正在寻找的行为是在您聚焦时修改其宽度（在其中单击鼠标）：

input[type=text]:focus {
    width: 100%;
}

但在改变它的宽度之前，你需要给它一个较低的值，例如：

input[type=text] {
    width: 20%;
    background: #10314c;
}

【讨论】：

感谢您的回答。我试过你的代码，但没有用。你能在小提琴中更新吗？
我检查了你的小提琴。你检查我的问题陈述了吗？我已经提到了那里的链接。它应该以某种方式工作，如果我点击搜索图标，它应该会扩展。我在你的小提琴中看不到任何扩展。
我再解释一次。如果您查看我上面的屏幕截图，在搜索任何内容时，包含搜索图标的周围标记的箭头白色方框应在深蓝色搜索栏内展开。深蓝色的搜索栏无论如何都不会改变它的大小。它会保持不变。希望对你有帮助，否则我会给你更多的解释

【解决方案16】：

只需使用焦点和父子属性

.back:focus ~ .extand{
    width:50%;  /*increase width as per your choice.
}

但是反向是行不通的。因为扩展类嵌套在后面。

【讨论】：