How to put an input submit inside the input text?

Question

How to put an input submit inside the input text?

Navigation

#1 by (8 votes)
#2 by (2 votes)

4

I have this HTML:

<form action="" method="post">
   <input type="text" name="pesquisa" placeholder="O que você procura?"/>
   <input type="submit">
</form>

And I have this CSS:

body>header form{
    margin:25px 80px;
    display:inline-block;
}

body>header form input[type=text]{
    padding:8px 50px 8px 20px;
    width:300px;
    font-family:'Open Sans';
    font-size:13px;
    border-top:1px solid #C21B13 !important;
    border:3px solid #C21B13;
    border-radius:20px;
    outline:none;
}

body>header form input[type=submit]{ }

My site looks like this:

What do I want to do? I want to put this submit button inside the input.

How do I do this correctly?

ATT.

html css

asked by anonymous 10.12.2014 / 04:22

2 answers

2

The button is not inside the input:

.box {
    border:1px solid #444;
    width:300px;
}

.box input {
    display:inline-block;
    outline:0;
    border:0;
    padding: 5px;
}

.box .button {
    background: #aaa;
    color: #fff;
    font-weight: bold;
    border:none;
    float:right;
    padding: 5px 10px;
}

<div class="box">
    <input type="text" name="search" placeholder="Pesquisar..." />
    <button type="submit" class="button">Pesquisar</button>
</div>

10.12.2014 / 04:42

Problems Embarrassingly parallel? Filtering td with PHP

score 8 · Accepted Answer

Actually the button is not placed inside <input> .

One solution is basically to leave your input[type="text"] borderless and wrap <form> with an element that will cause the submit to be inside. The idea would be:

form {
  border: 2px solid #ccc;
  display: inline-block;
  padding: 4px;
}

form > input {
  border: none
}

form > button {
  background: royalblue;
  border: none;
  color: #fff;
  padding: 4px 10px
}

<form action='/' method='post'>
  <input type='text' name='pesquisa' placeholder='O que você procura?'>
  <button type='submit'>Pesquisar</button>
</form>