• 215
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет, вот нашел довольно интересную плюшку, интересное оформления поля поиска на бутстрапе. Ну похожих реализаций довольно много,и все требуют дополнительных скриптов и обычно jquery. Ну здесь тоже используется jquery, также используется подключение шрифтовых иконок fontawesome ,ну и стандартное подключение bootstrap 4.1.1
И так первое у нас должен быть подключен bootstrap 4.1.1 , jquery и fontawesome ну примерно так

Код:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

Конечно,все это может грузится и сайта, скачиваете скрипты стили,заливаете в папки шаблона и подключаете в шаблон.
Далее само поле поиска, добавляем туда где хотим его видеть
Код:
     <div class="searchbar">
<input class="search_input" type="text" name="" placeholder="Search...">
<a href="#" class="search_icon"><i class="fas fa-search"></i></a>
</div>
Ну и не забываем добавить стилей в ваш файл стилей
Код:
    .searchbar{
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}

.search_input{
color: white;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}

.searchbar:hover > .search_input{
padding: 0 10px;
width: 450px;
caret-color:red;
transition: width 0.4s linear;
}

.searchbar:hover > .search_icon{
background: white;
color: #e74c3c;
}

.search_icon{
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color:white;
}
Вот и все пользуемся.

Можешь почитать и вот эту статейку "Во .... ,а где админка...."

mistakes

Это тоже интересно

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

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element