Помощь в вёрстке формы поиска

177

28 сентября 2017, 12:23

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

Вот что уже сделал

<div id="put">
    <form>
       <p><input type="search" name="q" placeholder="Поиск по сайту..."> 
       <input type="submit" value="Найти"></p>
    </form>
</div><!-- end put -->

Answer 1

Есть ещё вариант с использованием position: absolute. Суть такова: заводим контейнер под форму поиска с position: relative, поле поиска растягиваем на всю ширину, а кнопку размещаем поверх поля по координатам относительно правого верхнего угла.

(В примере я ещё сбрасываю родные стили input и button, не буду это расписывать, вопрос не про это)

.search-form { 
  display: inline-block; 
  /* Это включает позиционирование относительно <form>, */ 
  /* а не относительно всей страницы */ 
  position: relative; 
} 
 
.search-form-input { 
  width: 188px; 
  height: 32px; 
  line-height: 28px; 
  margin: 0; 
  padding: 0 38px 0 10px; 
  border: 2px solid #d5d5d5; 
  border-radius: 0; 
  background-color: white; 
  box-sizing: border-box; 
  font-family: Tahoma, sans-serif; 
  font-size: 13px; 
} 
 
.search-form-btn { 
  /* Позиционирование относительно <form> */ 
  position: absolute; 
  right: 2px; /* 2px - размер border'а поля формы */ 
  top: 2px; 
  width: 28px; 
  height: 28px; 
  line-height: 28px; 
 
  /* Просто тюнинг внешнего вида */ 
  color: #666; 
  font-weight: bold;       
  margin: 0; 
  padding: 0; 
  border: 0; 
  border-radius: 0; 
  background-color: transparent; 
  text-align: center; 
  cursor: pointer; 
}

<form action="#" class="search-form"> 
  <input type="search" class="search-form-input" placeholder="Search.." /> 
  <button type="submit" class="search-form-btn"> 
    <!-- Сюда можно запихнуть любую картинку на свой вкус --> 
    O 
  </button> 
</form>

Answer 2

Вместо значка поиска вставил букву О для простоты выполнения. Соответственно, если нужен значок, то вместе второго input ставится button, внутри которого изображение значка поиска.

.search-field { 
  float: left; 
  padding: 5px; 
  border: 1px solid black; 
  border-right: none; 
  outline : none;  
} 
.search-button { 
  float: left; 
  padding: 5px; 
  background-color: #fff; 
  border: 1px solid black; 
  border-left: none; 
  outline : none;  
}

<form> 
  <input class="search-field" type="search" name="q" placeholder="Поиск по сайту...">  
  <input class="search-button" type="submit" value="O"> 
</form>