Как добавить кнопку поверх поля для ввода?

390

10 декабря 2016, 10:40

Как добавить кнопку в строке ввода чтобы это выглядело примерно так?

Вот мой код:

<div id="search">
        <div class="container">
                <h1>Search U.K. house price data</h1>
                    <form class="has-success has-feedback has-feedback-left">
                                <label class="control-label sr-only" for="inputSearch">Search U.K. house price data</label>
                                <input class="form-control" type="text" id="inputSearch" placeholder="Enter a postcode, street or address">
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                                <button class="btn" type="submit">SEARCH</button>
                    </form>
        </div>
    </div>

Кнопка появляется снизу.

В чём проблема? Как вообще примерно должен выглядеть код для всей строки?

Answer 1

*{ 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
form{ 
  display: inline-block; 
  vertical-align: top; 
  position: relative; 
} 
input[type="search"]{ 
  outline: none; 
  border: 2px solid #222; 
  padding: 5px 100px 5px 30px; 
  display: block; 
  width: 100%; 
  height: 50px; 
  background: #fff; 
  border-radius: 25px; 
} 
button[type="submit"]{ 
  position: absolute; top: 7px; right: 10px; 
  z-index: 9; 
  outline: none; 
  border: none; 
  display: inline-block; 
  background: #00f; 
  color: #fff; 
  padding: 10px 25px; 
  border-radius: 25px; 
  cursor: pointer; 
} 
button[type="submit"]:hover{ 
  background: #f00; 
}

<form action="#"> 
  <input type="search" placeholder="Text search" > 
  <button type="submit">Button</button> 
</form>

Answer 2

* { 
  box-sizing: border-box; 
} 
 
form { 
  position: relative; 
  margin: 1em; 
} 
 
input { 
  display: block; 
  width: 100%; 
  height: 3em; 
  line-height: 3em; 
  border-radius: 1.5em; 
  border: 1px solid; 
  padding: 0 1.5em; 
} 
 
button { 
  position: absolute; 
  top: .4em; 
  right: .4em; 
  height: 2.2em; 
  border-radius: 1.1em; 
  border: 1px solid; 
  text-transform: uppercase; 
}

<form> 
  <input type="text" placeholder="...."> 
  <button type="submit">Search</button> 
</form>

Answer 3

Вот примерчик тык

        <div class="col-sm-3 col-md-3 pull-right">
    <form class="navbar-form" role="search">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
        <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
        </div>
    </div>
    </form>
    </div>

Answer 4

Вариант 1: Вы можете воспользоваться абсолютным позиционированием. Разместить кнопку поверх input с помощью z-index.

Вариант 2: Разместить кнопку справа от поля ввода, с помощью дизайна кнопки притвориться частью поля ввода.

Answer 5

Для этого существует input groups, вам надо кастомизировать button addons

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
<div class="input-group"> 
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 
  <input type="text" class="form-control" placeholder="Enter address"> 
  <span class="input-group-btn"> 
    <button class="btn btn-default" type="button">Search</button> 
  </span> 
</div>

Создание эксклюзивного проекта в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Есть ли разница между img и background-image?

418

HTML

Как сделать респонсив-svg по одной из осей?

Собственно, если svg задать viewBox, то он масштабируется, подгоняя свой размер под контейнерНо я хочу, чтобы он только по горизонтальной оси масштабировался,...

346

HTML