Is there a way to update the default form styling for two form elements so that the text box and button have the same height and are positioned side by side to create the illusion of one element?
While it appears correctly in some browsers, in others they seem to be vertically misaligned by a pixel or two. I'm having trouble with Opera and Firefox on OS X specifically. Here is a demo on jsfiddle: http://jsfiddle.net/QS3ec/6/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input[type="text"] {
background-color: #fafafa;
padding: 7px;
font-family: helvetica, arial, sans-serif;
font-size: 1.2em;
margin-bottom: 20px;
display: block;
border: solid 2px #bbb;
color: #6f6f6f;
}
...
(remaining code remains unchanged)
...