1

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

введите сюда описание изображения Вот мой код:

<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>

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

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

7
  • Как вариант - абсолютное позиционирование.
    – PCGeek
    31 июл 2016 в 12:38
  • Т.е. справа, а не поверх
    – Ravdan
    31 июл 2016 в 13:35
  • используйте позиционирование .btn {position:absolute; top: xx px; right: xx px; }
    – soledar10
    31 июл 2016 в 13:48
  • css : #search form { height: 60px; position: relative; } #search form input { border-radius: 30px; max-width: 970px; height: 60px; } #search h1 { text-align: center; color: white; background-size: cover; } .btn { height: 40px; width: 160px; background: url("../images/Rectangle-10-copy.png"); }
    – Ravdan
    1 авг 2016 в 13:21
  • Вопрос помечен тегом bootstrap. В бутстрапе есть специальные классы для этого: form-group для оборачивания и input-group-addon для запихивания кнопок/значков на инпуты. Больше описания здесь 1 авг 2016 в 14:31

5 ответов 5

4

* {
  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>

3

*{
  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>

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>

2

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

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

1
  • и как код будет при этом выглядеть?
    – Ravdan
    1 авг 2016 в 13:48
2

Для этого существует 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>

3
  • А почему у вас Search получился в рамке? Как в том месте вставить картинку? И чтобы она была не в рамке.
    – Ravdan
    2 авг 2016 в 8:06
  • В рамке потому что это стандартные стили бутстрапа. Как вставить картинку не знаю.
    – stackanon
    2 авг 2016 в 8:13
  • Что-то не похоже на то, что в вопросе.
    – Qwertiy
    2 авг 2016 в 21:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.