Add button inside input field

Question

I have a search form and I'd like to add the search button inside its right side like this:

Here is the code for my form:

<form action="search.php" method="post" class="index-search-form">
                <input name="search" type="text" class="" placeholder="&#xf002;  What are you looking for?">
                <button name="submit" class="" type="submit">Search</button>
            </form>

[Check this post. This might help you](http://stackoverflow.com/questions/15314407/how-to-add-button-inside-input) — Nimish, Jan 15 '17 at 12:25
Are you able to use Boostrap? They have input fields with inline buttons like you want. — Paul McLoughlin, Jan 15 '17 at 12:25

Baezid Mostafa · Answer 1 · 2017-01-15T13:35:56.390

If you want to set the button inside the input field. You need to make the button position absolute. And the form position relative and set display: inline-flex or inline-block or initial( For initital you need to adjust the padding top and bottom for button or input field ) . I set a width for the input field so text will be clearly visiable. I ust add a class for input field. If you have any question ask me in comment. Thanks. LiveOnFiddle

form.index-search-form {
  position: relative;
  display: inline-flex;
}

button[name="submit"] {
  position: absolute;
  top: 0;
  right: 0;
}

input.search-box {
  width: 250px;
  font-family: FontAwesome;
  padding: 2px 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<form action="search.php" method="post" class="index-search-form">
  <input name="search" type="text" class="search-box" placeholder="&#xf002;  What are you looking for?">
  <button name="submit" class="" type="submit">Search</button>
</form>

score 2 · Answer 2 · answered Jan 15 '17 at 12:39

Use position and padding to accomplish this effect.

form {
  display: inline-block;
  position: relative;
}
form input {
  padding-right: 4.6em;
}
form button {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.4em;
}

<form action="search.php" method="post" class="index-search-form">
  <input name="search" type="text" placeholder="What are you looking for?">
  <button name="submit" class="" type="submit">Search</button>
</form>

score 0 · Answer 3 · answered Jan 15 '17 at 12:36

0

Do you mean somethink like this?

.index-search-form {
    display: flex;
}

.inputField {
    flex: 1;
}

<form action="search.php" method="post" class="index-search-form">
                <input name="search" type="text" class="inputField" placeholder="&#xf002;  What are you looking for?">
                <button name="submit" class="" type="submit">Search</button>
            </form>

answered Jan 15 '17 at 12:36

Teshtek

1,212
1
12
20

no he need that button inside the input field. – Baezid Mostafa Jan 15 '17 at 13:37

Add button inside input field

3 Answers3