Properly Size Buttons & Form Input Fields

HTML & CSS
1

Hi, I’m really struggling trying to figure out how to style form input fields and buttons so that they are a specific size and that the text exactly centers (in a button). It’s most noticeable when there is a button directly next to an input field, and the two should match precisely.

I can almost get it to work in one browser (usually FF), but not consistently across IE, FF, Chrome, Safari.

Here’s a sample page for a site we’re currently working on. This page actually has 3 examples. There’s a top search field & button, an email sign-up form, and a send button on the bottom.

Sample Page

I kind of hacked at the top search field & button to get it to work in FF (though it still looks a pixel off). But it’s offset in IE. It’s probably closest to correct in Safari or Chrome.

The email sign-up and bottom send button are only minimally styled. None of these really look correct, though. There is space between the email input field and button, and they are different sizes. And the buttons aren’t consistently sized or the text is not consistently centered.

Please help! If there is a great tutorial anywhere, I’m totally open to that. THANKS!

2

Unfortunately there is no consistency between browsers and how they render form elements and quite often the best advice is to leave them well alone.

A lot of the styling on form elements is handled internally by the browsers and not accessible via css.

For example these are just a few of the rules that Firefox uses to style form elements.


/*short extract from form.css /forms.css*/

button, 
input[type="reset"],
input[type="button"],
input[type="submit"] { 
  -moz-appearance: button;
  /* The sum of border-top, border-bottom, padding-top, padding-bottom
     must be the same here, for text inputs, and for <select>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  color: ButtonText; 
  font: -moz-button;
  line-height: normal !important;
  white-space: pre;
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
  text-align: center;
}

button {
  /* Buttons should lay out like "normal" html, mostly */
  white-space: normal;  
  text-indent: 0;
}

*|*::-moz-button-content {
  display: block;
}

button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  padding: 0px 5px 0px 7px;
  border-style: inset;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0px 2px 0px 2px;
  border: 1px dotted transparent;
}

button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
  border-color: ButtonText;
}

That is just a fraction of the file and although you can access some of those non standard properties in Firefox other browsers do these similar things internally.

You can get your text and submit looking the same cross browser like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.test input {
    float:left;
}/* kill whitespace between inputs*/
input.inputbox {
    border:2px solid #BFEDF7;
    font-size:11px;
    height:14px;
    padding:1px 3px;
    width:104px;
}
input.button {
    background:#9C9EA0;
    border:medium none;
    color:#FFFFFF;
    font-size:10px;
    height:20px;
    padding:0;
    text-align:center;
    text-transform:uppercase;
    width:54px;
}
/*Remove padding from mozilla*/
input[type="submit"]::-moz-focus-inner {
 padding: 0;
 border: none;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
    <div class="test">
        <input class="inputbox" type="text" name="Search" id="Search" value="Search" />
        <input class="button" type="submit" name="submit" id="submit" value="Search" />
    </div>
</form>
</body>
</html>

You do lose the click effect on the submit doing this though. Other form elements are not so easy to style and there will be differences that can’t be fixed.

You will need a valid doctype and not one that renders quirks mode (and remove the xml declaration as that trips quirks mode in IE6).