Панель поиска с фоновой графикой

Question

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

Answer 1

Вы бы нужен контейнер, чтобы поставить окно ввода в, и поставить передний и конец DIV к нему. В зависимости от совместимости с браузером вы можете добавить еще несколько div, чтобы убедиться, что поле ввода правильно показано в браузерах, таких как IEX7/8.

Таким образом, вы должны были бы следующие:

<form class="searchbox"> 
    <input type="text" class="text" /> 
    <input type="submit" class="submit" /> 
</form> 

Сопровождаемый следующем примере CSS

form.searchbox { background:url(leftside_image.gif) 0 0 no-repeat; padding-left:15px; } 
form.searchbox input.text { border:none; border-top:1px solid #999; border-bottom:1px solid #999; height:25px; line-height:25px; padding:0 5px; } 
form.searchbox input.submit { background:url(rightside_image.gif); } 

Answer 2

Добавить Html часть как этот

<div class="searchbox"> 
    <input class="lightsearch" type="text" name="s" onfocus="doClear(this)" value=""> 
</div> 

Css части, cкачать найдите поле для поиска и замените его на имя

.searchbox input.lightsearch { 
    background: url("images/lightsearch.png") no-repeat scroll 0 0 transparent; 
    border: 0 none; 
    color: #575757; 
    font-size: 11px; 
    height: 19px; 
    margin-top: 24px; 
    padding: 2px 5px 2px 24px; 
    width: 170px; 
}