Как добавить кнопку в инпут? html

183

15 августа 2018, 18:30

Всем привет, помогите, пожалуйста. Как в HTML добавить <input type="button"> в <input type="text">, чтобы получилось как на фото? Заранее спасибо.

Answer 1

<style>
   .search {
    width: 300px; /* Ширина поля с кнопкой */
    border: 1px solid #000; /* Параметры рамки */
    min-height: 20px; /* Минимальная высота */
   }
   input[type="search"] {
    border: none; /* Убираем рамку */
    outline: none; /* Убираем свечение в Chrome и Safari */
    -webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
    width: 274px; /* Ширина поля */
    vertical-align: middle; /* Выравнивание по середине */
   }
   input[type="submit"] {
    width: 20px; /* Ширина кнопки */
    height: 20px; /* Высота кнопки */
    border: none; /* Убираем рамку */
    background: url(images/video.png) no-repeat 50% 50%; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <form>
    <div class="search">
     <input type="search" name="q">
     <input type="submit" value="">
   </div>
  </form>
 </body>
</html>

Answer 2

Еще можно такой вариант

    *{ 
      margin: 0; 
      padding: 0; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      box-sizing: border-box; 
      font-family: sans-serif; 
      outline: none; 
    } 
    .wrapper_inpt { 
      width: 300px; 
      height: 40px; 
      border-radius: 20px; 
      border: 1px solid #d1d1d1; 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      padding: 2px; 
    } 
    .btn_area { 
      width: 80px; 
      height: 36px; 
      background: #4ba025; 
      border-radius: 20px; 
      color: #fff; 
      font-size: 0.7em; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      cursor: pointer; 
    } 
    input { 
      border: none; 
      background: none; 
      width: calc(100% - 84px); 
      height: 100%; 
      text-indent: 10px; 
    }

  <div class="wrapper_inpt"> 
    <input type="text" placeholder="denis@getcraftwork.com"> 
    <div class="btn_area"> 
      Send Invite → 
    </div> 
  </div>