CODEWITHSUNDEEP
css
CodeDevelopr
CodeDevelopr

Reputation: 1265

CSS form submit styling

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

Upvotes: 1

Views: 792

Answers (3)

Palmer
Palmer

Reputation: 173

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

Upvotes: 0

Francisco Presencia
Francisco Presencia

Reputation: 8851

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.

Upvotes: 1

Bogdan Emil Mariesan
Bogdan Emil Mariesan

Reputation: 5647

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.

Upvotes: 4

Related Questions