如何在css中点击搜索图标时展开小方块输入框？

时间：2018-04-10 16:01:46

标签： javascript html css font-awesome

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

enter image description here

我用来制作搜索图标和方框的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，它的工作几乎正确但这两件事情我无法弄清楚如何做到：

  • 方框在撞到外面的任何地方后应该回到原来的位置。
  • 当白色方形边框展开时，内部背景应为白色。

有关如何做到这一点的任何想法？

16 个答案:

答案 0 :(得分：10)

这是更新的小提琴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。 点击输入后，它会聚焦，可以在css中使用它来定位它并为其添加宽度， 当你在外面点击时，输入会变得没有焦点并返回到原始大小

答案 1 :(得分：6)

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

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>

答案 2 :(得分：4)

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

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

解决方案：

  1. 要么在css中包含图标（图像）作为输入的背景图像属性。 （我会告诉你如何弄清楚如何做到这一点，因为你有链接和示例;）
  2. 你包含了一些JavaScript（JQuery），我相信在这种情况下Jquery是最简单的

    3. <强> 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苗条重要 

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

    这是演示示例：Click here

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

答案 3 :(得分：3)

您需要修改您的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

答案 4 :(得分：3)

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

然后您还可以创建一个类，例如active，您可以在输入时切换focus和blur个事件，但该类将在该父元素上更改。然后根据该类，您可以设置输入和图标样式。

请注意，如果您想更改%中的输入而不是px中的输入，则宽度将取决于父元素。因此，如果您想要与form元素位于同一行中的其他元素，那么您应该width使用px，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>

答案 5 :(得分：3)

我认为你不想使用JavaScript。 从您提供的代码中，您只需要将：焦点选择器添加到extand类中。我希望这会有所帮助。

＆＃13;
＆＃13; 
<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>
＆＃13; 
HttpEntity entity = MultipartEntityBuilder.create()
        .setMimeSubtype("related")
        .addPart(...)
        .addPart(...)
        .addPart(...)
        .build();
HttpRequest request = RequestBuilder.post("/stuff")
        .setEntity(entity)
        .build();
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：2)

您可以将: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/

答案 7 :(得分：2)

<强> 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/

希望有所帮助。

答案 8 :(得分：2)

您可以尝试将：hover和：focus选择器添加到extand类中。 我希望这有帮助

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

答案 9 :(得分：1)

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

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

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

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

答案 10 :(得分：1)

这可以这样做

＆＃13;
＆＃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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：1)

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

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();
});

这是你想要的吗？ 我希望它有所帮助。

答案 12 :(得分：1)

此处搜索图标的解决方案展开，
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");
    }
});

答案 13 :(得分：1)

我认为这就是你想要的

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

答案 14 :(得分：1)

我希望这适合你：

  

如果您不介意我更改了元素的顺序

我只使用 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>

我认为上面的代码将涵盖您的所有需求。如果有任何其他内容请发表评论，我会尽力帮助您。

答案 15 :(得分：0)

只需使用焦点和父子属性

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

但反向不起作用。因为extand类嵌套在后面。

相关问题
最新问题