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.

example

I’m using this CSS currently:

button {
  position: relative;
  left: -4px;
  box-sizing: border-box;
  padding: 0 10px;
  margin: 0;
  font-size: 17px;
  border: 1px solid gray;
  border-radius: 0 3px 3px 0;
}

http://jsfiddle.net/GRwqL/

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.


solution

You need to override the default margin on the input element too.

jsFiddle example

input, button {
  margin:0;
}

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:

  input, button {
box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding:0;
  margin:0;
  vertical-align:top;
  line-height:30px;
  height:30px;
}

Basically, use box-sizing to change the box model, again reset the margin/padding, use vertical-align:top for alignment issues, and then set an equal line-height/height on both elements.

jsFiddle example