Панель поиска под кнопкой поиска – при нажатии ⇐ CSS

[Гость]

Я разрабатываю веб-страницы для приложения angular 4 с использованием начальной загрузки 3.

Пытаюсь добавить кнопку поиска (вверху справа/вверху слева), которая будет расширяться в следующей строке щелкните. См. кнопку поиска в правом верхнем углу здесь.

Код: Выделить всё

css

Код: Выделить всё

input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,

input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 7px 9px 7px 17px;
width: 55px;

border-radius: 1em;

-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 170px;
background-color: #fff;

-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}

#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 200px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
color: black;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}

This gives me search bar expand in same row. I've tried to get examples for the same. But all of them talk about expanding same row.

NOTE: The search bar & search button will be in same row for desktop view. Similar to this. Will change responsively to mobile view.

Thanks in advance. Suggestions are most welcome.


Источник: https://stackoverflow.com/questions/461 ... n-on-click