Clean way to make a button merged with input text field
I’m trying to setup a clean CSS to style a button to visually looks merged with the near input field.
I’m using this CSS currently:
The main problem is the usage of the
left property, I don’t think it’s a good practice, mostly because it’s not handled correctly on all browsers.
The other problem is that this code in Internet Explorer and Firefox makes the button not high as the input field.
So I was looking for some help to write a better code cross-browser and cleaner. Personally I don’t care if is needed a wrapper element or any other HTML element, I just need a clean code, cross browser and that works well.
You need to override the default
margin on the
input element too.
In doing so, there will no longer be space between the elements, assuming there is also no space between them in the markup. Note, that
inline elements respect the whitespace in the markup.
For instance, even after resetting the default
margin there is space between the elements, if there is space between them in the markup (example)
For your second problem (making the elements the same height), do the following:
box-sizing to change the box model, again reset the
vertical-align:top for alignment issues, and then set an equal
height on both elements.