Как расширить маленькое квадратное поле ввода при нажатии значка поиска в CSS?

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

Коды 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%;
}

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

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

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

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

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

Взгляните на это: jsfiddle.net/p8zrst2p/48. Я повозился с вашей демонстрацией, чтобы решить ваши проблемы минимальным образом.

— 15.04.2018 20:22

@kleinfreund, эй, в этом все хорошо. Есть одна вещь, которую я считаю логически разумной - если вы посмотрите на этот пример. Если вы щелкнете внутри текстового поля поиска, то после этого значка поиска будет мигать строка, но в вашем примере (в моем тоже) эта мигающая строка происходит перед значком поиска? Можно ли сделать так, как это сделано в w3schools, чтобы после значка поиска появлялась мигающая линия?

— 15.04.2018 20:30

Я снова обновил демку. Это все еще довольно грубо, но, возможно, вы сможете чему-то научиться: jsfiddle.net/p8zrst2p/55.

— 15.04.2018 20:39

@ user5447339, если мой ответ вам поможет, примите его

— 24.05.2018 17:59

javascript html css font-awesome

10.04.2018 18:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

6 051

Ответы 16

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

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

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

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

Спасибо за ответ. Я пробовал ваш код, но он не работал. Можете ли вы обновить в скрипке?

— 10.04.2018 18:16

Я проверил твою скрипку. Вы проверили мою формулировку проблемы? Я упомянул ссылку там. Он должен работать таким образом, что если я нажму на значок поиска, он должен расшириться. Я не вижу расширения в твоей скрипке.

— 10.04.2018 18:30

Объясняю еще раз. Если вы проверите мой снимок экрана выше, окружающее отмеченное стрелкой белое квадратное поле, содержащее значок поиска, должно расширяться внутри темно-синей панели поиска при поиске чего-либо. Темно-синяя строка поиска ни в коем случае не изменит своего размера. Он останется прежним. Надеюсь, это поможет, иначе я дам вам больше объяснений

— 11.04.2018 06:41

10.04.2018 18:14

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

— 10.04.2018 18:23

Кроме того, расширение должно происходить под панелью поиска.

— 10.04.2018 18:24

10.04.2018 18:16

Ссылка, которую вы предоставляете на smialar пример, имеет значок, однако изображение значка существует в 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');
});

это демонстрационный пример: кликните сюда

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

Спасибо за ответ и код. Я пробовал использовать указанные выше коды, но почему-то не сработало. Мне интересно, можете ли вы обновить его в скрипке.

— 10.04.2018 20:24

я просто редактирую его, он работает, моя проблема была классом на входе, я просто исправил его

— 10.04.2018 20:27

Я попробовал еще раз. Можете ли вы обновить его в скрипке? По некоторым причинам он не работает на моем компьютере.

— 10.04.2018 20:32

рабочий пример была включена в конец ответа, если вы сочтете этот ответ полезным, отметьте его как отвеченный

— 10.04.2018 20:42

Спасибо за ответ. Я проверил твою скрипку. Если вы проверите мой снимок экрана выше, окружающее отмеченное стрелкой белое квадратное поле, содержащее значок поиска, должно расширяться внутри темно-синей панели поиска при поиске чего-либо. Темно-синяя строка поиска ни в коем случае не изменит своего размера. Он останется прежним. Надеюсь, это поможет, иначе я дам вам больше объяснений.

— 11.04.2018 06:39

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

— 12.04.2018 15:34

ты все еще рядом? Он работает так, как мне нужно, но кое-чего не хватает. Прямо сейчас белое квадратное поле возвращается в исходное положение после щелчка внутри поля, но я хочу, чтобы он делал то же самое, даже если я нажимаю снаружи, так же как w3schools имеет пример, связанный в моем вопросе? Также, когда белая квадратная рамка расширяется, внутренний фон должен быть белым? Можно ли это сделать?

— 15.04.2018 20:15

Я проверил w3school, это то, что вы хотите, проверьте рабочий пример

— 15.04.2018 23:43

10.04.2018 20:14

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

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

15.04.2018 20:43

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

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

16.04.2018 09:28

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

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

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

16.04.2018 13:04

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

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

Но обратное не пойдет, так как класс extand вложен внутрь спины.

16.04.2018 13:25

Вот решение для расширения значка поиска,
Демо 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");
    }
});

18.04.2018 19:07

Я думаю это то что ты хочешь

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

19.04.2018 11:07

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/

Надеюсь, это поможет.

19.04.2018 23:54

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

If you don't mind I have change the order of your element

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

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

20.04.2018 09:56

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

20.04.2018 10:34

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

Рабочий скрипт здесь

21.04.2018 12:54

Вы можете создать один родительский элемент для элементов input и icon, чтобы вы могли позиционировать icon с абсолютной позицией относительно этого родительского элемента.

И затем вы также можете создать один класс, например active, который вы можете переключать на события focus и blur при вводе, но класс будет изменяться в этом родительском элементе. А затем на основе этого класса вы можете стилизовать ввод и значок.

Обратите внимание, что если вы хотите изменить ввод в %, а не в px, эта ширина будет зависеть от родительского элемента. Поэтому, если вам нужен какой-то другой элемент в той же строке, что и ваш элемент form, вы должны использовать width в px, например, этот ДЕМО

$(".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>

22.04.2018 13:19

Я решил, что вы не хотите использовать 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>

22.04.2018 18:52

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

22.04.2018 19:06

Другие вопросы по теме

Как выделить выделение текста Safari на рабочем столе в <div> после Range.setStart / Range.setEnd?

Использование каждого элемента из выборки API отдельно

Как я могу складывать div в относительный родительский div и показывать нижний div при наведении

CSS удалить пробел или поле таблицы tr

Получение данных из SQL, передача в jQuery и создание последующего списка

Как перечислить записи из диапазона столбцов листа Google в таблице HTML?

Неизвестный оператор if в javascript

Как изменить страницы в Chrome PDF Viewer?

Посещает ли html-форма указанную страницу?

Сортировка аудиофайлов по длительности

Как расширить маленькое квадратное поле ввода при нажатии значка поиска в CSS?

Ответы 16

Другие вопросы по теме

Похожие вопросы