Как сделать кнопку поиск и выпадающие меню одновременно

335
04 августа 2018, 01:40

Я сделал что-то вроде этого, но мне нужно чтобы вся кнопка была поиском а не какая-то часть. Что я хочу сделать будет изображено на картинке.

.body { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
 
.btn-space { 
    margin-right: 5px; 
} 
 
.save_button { 
    min-width: 80px; 
    max-width: 80px; 
} 
div.btn-group.btn-lgg { 
    margin: -5; 
    padding: -5; 
} 
.btn-lg { 
  width: 362px; 
  position: relative; 
} 
.btn-lgg { 
  width: 243px; 
  height: 46px; 
}
<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="utf-8"> 
  <title>Block</title> 
  <link rel="stylesheet" type="text/css" href="struct.css" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <!-- Latest compiled and minified CSS --> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 
   <!-- Optional theme --> 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
<body> 
  <div class="row" style = "margin-left:-10px; margin-top:200px;margin:display;"> 
<div class="container"> 
  <div class="btn-group"> 
     <button type ="button" class="btn btn-light btn-lg"data-toggle="dropdown"> 
       <form class="form-search"> 
       <input type="text" class="input-medium search-query"> 
     <i class="fas fa-map-marker-alt"></i>  
     </button> 
     <ul class="dropdown-menu" role = "menu"> 
        <li><a href = "#">Action</a></li> 
        <li><a href = "#">Another action</a></li> 
        <li><a href = "#">Something else here</a></li> 
        <li class = "divider"></li> 
        <li><a href = "#">Separated link</a></li> 
     </ul> 
   </form> 
  </div><!-- 
  --><div class="btn-group"> 
     <button type="button" class ="btn btn-light btn-lgg"data-toggle="dropdown"> 
      <i class="fas fa-calendar-alt"></i>Primary 
     </button> 
     <ul class="dropdown-menu" role = "menu"> 
        <li><a href = "#">Action</a></li> 
        <li><a href = "#">Another action</a></li> 
        <li><a href = "#">Something else here</a></li> 
        <li class = "divider"></li> 
        <li><a href = "#">Separated link</a></li> 
     </ul> 
   </div><!-- 
    --><div class="btn-group"> 
   <button type="button" class ="btn btn-light btn-lgg"data-toggle="dropdown">Test 3</button> 
   <ul class="dropdown-menu" role = "menu"> 
      <li><a href = "#">Action</a></li> 
      <li><a href = "#">Another action</a></li> 
      <li><a href = "#">Something else here</a></li> 
      <li class = "divider"></li> 
      <li><a href = "#">Separated link</a></li> 
   </ul> 
</div><!-- 
--><div class="btn-group"> 
<button type="button" class ="btn btn-light btn-lgg"data-toggle="dropdown">Test 3</button> 
<ul class="dropdown-menu" role = "menu"> 
  <li><a href = "#">Action</a></li> 
  <li><a href = "#">Another action</a></li> 
  <li><a href = "#">Something else here</a></li> 
  <li class = "divider"></li> 
  <li><a href = "#">Separated link</a></li> 
</ul> 
</div> 
</div> 
</div> 
 
  <!-- jQuery --> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
  <!-- Latest compiled and minified JavaScript --> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

Answer 1

input c drop-down action:

body{ 
  padding: 10px; 
} 
input { 
  border: 5px solid silver; 
  background-color: silver; 
  color: #fff !important; 
}
    <!DOCTYPE html> 
    <html> 
    <head> 
      <meta charset="utf-8"> 
      <title>Block</title> 
      <link rel="stylesheet" type="text/css" href="struct.css" /> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
       <!-- Latest compiled and minified CSS --> 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> 
       <!-- Optional theme --> 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    </head> 
    <body> 
      <div class="btn-group"> 
        <form class="form-search"> 
         <input type="text" class="input-medium search-query" data-toggle="dropdown"> 
         <ul class="dropdown-menu" role = "menu"> 
            <li><a href = "#">Action</a></li> 
            <li><a href = "#">Another action</a></li> 
            <li><a href = "#">Something else here</a></li> 
            <li class = "divider"></li> 
            <li><a href = "#">Separated link</a></li> 
         </ul> 
         <i class="fas fa-map-marker-alt"></i>    
       </form> 
      </div> 
 
      <!-- jQuery --> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
      <!-- Latest compiled and minified JavaScript --> 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    </body> 
    </html>

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте web-king.com.ua
ТОП-10
READ ALSO
Где ошибка в коде javascript?
HTML

Где ошибка в коде javascript?

Как её исправить?

 185
Интерактивная карта России на jqvmap. Как добавить несколько карт?
jQuery

Интерактивная карта России на jqvmap. Как добавить несколько карт?

День добрыйЕсть интерактивная карта

 253
Вывести текст из input в поле &lt;p&gt;?
jQuery

Вывести текст из input в поле <p>?

Как вывести текст из input в другой блок или параграф ?

 189
Фильтрация slick slider подобно фильтрации isotop
jQuery

Фильтрация slick slider подобно фильтрации isotop

Есть такой слайдер (использую slick slider):

 195