Styling Input and button - height issue - html

Question

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

Answer 1

<span class="inputWithButton">
<input type="text"><button>Submit</button>
</span>
input, button{outline: none;}
.inputWithButton{
display:inline-block;
overflow:hidden;
border:1px solid gray;
border-radius: 3px;
}
.inputWithButton > *{
vertical-align:top;
border:0;
margin:0;
padding: 3px 10px;
}
.inputWithButton > input[type=text]{
width:150px;
}
.inputWithButton > button{
border-left:1px solid gray;
background:#eee;
cursor:pointer;
width:70px;
}
.inputWithButton > button::-moz-focus-inner {
border: 0;
}
DEMO with higher paddings and different borders colors : http://jsbin.com/OPiroyib/4/edit
(Just remove border from the span and add border to both input and button) That easy.

Answer 2

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

Answer 3

Take a look at css-reset or normalize.css to set the defaults in all browsers to "null".
Also css frameworks like bootstrap are very cool!

Answer 4

Have you thought about using a simple span tag instead of a button and then attach an onclick event to it?
The following seems to work ok for me - though you might need to use a reset / modenizer style sheet to make it more predictable on different browsers.
http://jsfiddle.net/GRwqL/13/
<input class="nospace"></input><span class="nospace">Submit</span>
.nospace {
margin: 0;
padding: 0;
}
span.nospace {
height: 1em;
margin: 0;
padding: 1px;
border: 1px solid black;
}