How to put an Submit input inside the input text?

Asked

Viewed 11,183 times

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 website is like this:

site

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

How do I do it right?

ATT.

html css

2 answers

9


Actually the button is not placed inside the <input>.

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

snippet-example

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>

  • It is because in the case I wanted to style the input when it is focused (:Focus) in the case changing the border color, but doing so is only the middle part with the edge, will have another way to put the button inside the input?

  • I was able to figure out the solution... position:Absolute; margin:-20px 240px; But it served me something else your answer :)

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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.