Take the 2-minute tour ×

I am working on a CSS/HTML submit form that I am going to make look like the image below.

I am not sure how to make the Submit button appear like it is inside of the Text input though?

enter image description here

share|improve this question
What have you tried? –  James Montagne Mar 31 '12 at 21:42
Both input fields are probably surrounded by a div and the textbox doesn't have any border. –  ZippyV Mar 31 '12 at 21:45

3 Answers 3

up vote 4 down vote accepted

Put a container div that has the exact background color as your text-box. By doing this you can obtain the effect of the button being inside the textbox.

share|improve this answer

Easy, put it inside a div and style the div to look like an input text. Then you just make the input field have the same background than the div.

share|improve this answer

I did something similar with my blog for submitting comments using relative positioning. You won't need any extra HTML markup with this method.

Start by placing your submit button directly underneath and on the right side of the text input, then move it upwards with relative positioning into the text input. Something like this should work.

input[type="text"] {  <-- Your text input (height comes out to 35px with padding)
    height: 25px;
    padding: 5px;
    margin-bottom: 0;

input[type="submit"] { <-- Your submit button (10px shorter for padding)
    height: 25px;
    position: relative;
    bottom: 35px;
    right: 5px;
    margin-top: 0px;
    margin-bottom: -30px; <-- To get rid of the empty leftover space.
share|improve this answer

Your Answer


