Как расширить малый квадрат поля ввода при нажатии на значок поиска в css?

У меня есть панель поиска с иконкой поиска в крайнем левом углу, как показано здесь на скрипке и на снимок экрана ниже.

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%;
}


Постановка задачи:

Если я нажму на значок поиска, маленький квадратный ящик ввода (отмеченный стрелкой на снимке экрана), окружающий значок поиска, должен расширяться, как здесь.

Вот моя обновленная скрипка, которая работает почти правильно, но эти две вещи я не могу понять, как это сделать:

  • Квадратный ящик должен вернуться в исходное положение после удара куда угодно.
  • Когда граница белого квадрата расширяется, внутренний фон должен быть белым.

Любые мысли о том, как это можно сделать?

Ответы

Ответ 1

Вот обновленная ссылка на скрипку

.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 для его таргетинга и добавления ширины к нему. Когда вы нажимаете "снаружи", вход не сфокусируется и возвращается обратно к исходному размеру

Ответ 2

Я думаю, что вы не используете 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>

Ответ 3

Ссылка, которую вы предоставляете на примере smialar, имеет значок, однако изображение значка существует в Css, а не в HTML, так что, как только вы нажимаете на ввод или значок, он оживляет.

в случае вашего кода он существует в html, так что я не работал,

решения:

  1. либо вы включаете значок (изображение) в css в качестве свойства фонового изображения для ввода. (я оставлю все до вас, как выяснить, как вы можете это сделать, поскольку у вас есть ссылка и пример;)
  2. вы включаете 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 important

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

это демонстрационный пример: Нажмите здесь

конечно, существует много разных способов, если вы хотите продолжать поиск

Ответ 4

Вам нужно изменить свой 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>

Ответ 5

Вы можете создать один родительский элемент для элементов 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>

Ответ 6

Я решил, что вы не хотите использовать JavaScript. Из предоставленного вами кода вам нужно только добавить селектор: focus в свой класс extand. Надеюсь, это поможет.

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

Ответ 7

Вы можете использовать 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 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 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 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 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>

Ответ 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

Вы можете попробовать добавить селектор: 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>

Ответ 10

Поведение, которое вы ищете, заключается в изменении его ширины при фокусировке (щелкните мышью внутри него):

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

Но перед изменением его ширины вам нужно будет дать ему более низкое значение, например:

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

Ответ 11

Это можно сделать так

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

Ответ 12

Я изменил ваш "обновленный" скрипт, чтобы получить этот результат:

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

Я немного изменил CSS (цвет и ширина значка),
затем использовал селектор CSS :focus, например:

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

Использование :focus селектор :focus - это, на мой взгляд, более простой и правильный способ добиться того, чего вы хотите.

Затем... Сначала я хотел удалить JS, но, наконец, я использовал его так:
Щелчок на значке устанавливает фокус на входе, поэтому применяется CSS выше. Все это.

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

Так вы хотели этого?
Я надеюсь, что это помогает.

Ответ 13

Здесь Решение для значка поиска расширяется,
JSfiddle Demo - 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");
    }
});

Ответ 14

Я думаю, это то, что вы хотите

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

Ответ 15

Я надеюсь, что это сработает для вас:

Если вы не возражаете, я меняю порядок вашего элемента

Я использовал 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 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>

Ответ 16

Просто используйте свойство focus и parent child

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

Но обратное не будет работать. Поскольку extand class вложен внутри обратно.