Поиск ниже кнопки поиска - нажмите ⇐ Html

[Anonymous]

Я разрабатываю веб -страницы для приложения Angular 4, используя Bootstrap 3. См. Кнопку поиска в правом углу здесь. < /P>








< /code>

css < /p>

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

Это дает мне строку поиска в том же ряду. Я пытался получить примеры для того же. Но все они говорят о расширении той же строки. Похоже на это. Ответственно изменится на мобильное представление. < /P>

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

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