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

[Anonymous]

Я разрабатываю веб-страницы для приложения 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;
}

Это дает мне возможность расширить панель поиска в той же строке. Я попытался получить примеры того же самого. Но все они говорят о расширении одной и той же строки.

ПРИМЕЧАНИЕ. Панель поиска и кнопка поиска будут находиться в одной строке при просмотре на рабочем столе. Похоже на это. Будет меняться в зависимости от просмотра на мобильных устройствах.

Заранее спасибо. Предложения приветствуются.

Подробнее здесь: https://stackoverflow.com/questions/461 ... n-on-click