How to add a button to the input line to make it look like this?

enter image description here Here is my code:

<div id="search"> <div class="container"> <h1>Search UK house price data</h1> <form class="has-success has-feedback has-feedback-left"> <label class="control-label sr-only" for="inputSearch">Search UK 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>

A button appears at the bottom.

enter image description here What is the problem? How, in general, should the code look approximately for the whole line?

  • As an option - absolute positioning . - PCGeek
  • Those. Right, not over - Ravdan
  • use positioning .btn {position: absolute; top: xx px; right: xx px; } - soledar10
  • 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:21 pm
  • The question is tagged with bootstrap. In the bootstrap, there are special classes for this: form-group for wrapping and input-group-addon for stuffing buttons / icons on inputs. More description here - Mr. Brightside

5 answers 5

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

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

      Option 1: You can take advantage of absolute positioning. Place the button on top of the input using z-index.

      Option 2: Place the button to the right of the input field, using the button design to pretend to be part of the input field.

      • and how will the code look like this? - Ravdan

      To do this, there are input groups , you need to customize 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>

      • And why did your Search turn out to be framed? How to insert a picture in that place? And so that it was not framed. - Ravdan
      • Framed because these are standard bootstrap styles. How to insert a picture I do not know. - stackanon
      • Something doesn't look like the question. - Qwertiy ♦

      Here is a complete example.

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