Кнопка поиска внутри поля поиска, как Bing
-
01-10-2019 - |
Вопрос
Как я могу реализовать кнопку поиска внутри окна поиска, как видно на сайте, как Bing?
Решение
Это просто выглядит как внутри, но это не (вы не можете поставить HTML внутри ввода).
2 элемента (кнопка и кнопка и кнопка) находятся близко друг к другу с 0 полем, и оба имеют одинаковую высоту. График кнопки имеет белую маржу 3PX. Так что это создает этот эффект.
Возможная разметка и стиль могут быть:
<input type="text" id="q" />
<input type="button" id="b" value="Search" />
#q, #b {
margin: 0
}
#q {
padding: 5px;
font-size: 2em;
line-height: 30px
}
#b {
/* image replacement */
text-indent: -99999px;
width: 30px;
height: 30px;
display: block;
background: gray url(button.png) 0 0 no-repeat;
/* placing next to input using float or absolute positioning omitted ... */
}
Другие советы
Не связан с StackOverflow