Form Reset

1_form-reset.scss

// `Default font for form elements.
//----------------------------------------------------------------------------------------------------

$form-font-stack: Arial, "Liberation Sans", FreeSans, sans-serif !default;
$form-font-size: 13px !default;

// `Form Element Reset.
//----------------------------------------------------------------------------------------------------

input::ms-clear,
input[type="password"]::ms-reveal {
  display: none;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
}

button,
a.button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input[type="image"] {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  overflow: visible;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  width: auto;

  // Undo WebKit defaults
  -webkit-appearance: none;

  // Adjust background display
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;

  // Remove rounded corners
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;

  // Change box model
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  // Helvetica Neue present, because it works better
  // for line-height on buttons than Arial, on OS X.
  font-size: $form-font-size;
  font-family: $form-font-stack;
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
  // Firefox has this in its user-agent (?)
  // stylesheet, so let's just roll with it.
  //
  // http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal
  //
  // http://cssnewbie.com/input-button-line-height-bug
  //
  line-height: normal !important;
}

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  background: none;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  font-size: $form-font-size;

  // Leaving out Helvetica Neue, to not throw off size="..."
  // on inputs. Arial is more reliable, on Windows and OS X.
  font-family: $form-font-stack;

  // Undo WebKit defaults
  -webkit-appearance: none;

  // Adjust background display
  -webkit-background-clip: padding;
  -moz-background-clip: padding;
  background-clip: padding-box;

  // Remove rounded corners
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;

  // Change box model
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  // Get rid of up/down, plus/minus buttons
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
}

button[disabled],
input[disabled],
select[disabled],
select[disabled] option,
select[disabled] optgroup,
textarea[disabled] {
  -moz-user-select: -moz-none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  cursor: default;

  // Opacity.
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);
  opacity: 0.25;
}

textarea {
  min-height: 50px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  font-style: normal;
  font-weight: normal;

  // Font family repeated, for Firefox.
  font-family: $form-font-stack;
}

// For IE
select::-ms-expand {
  // Get rid of drop-down arrow
  display: none;
}

// For Firefox
@-moz-document url-prefix() {
  input,
  button,
  select,
  textarea {
    // Suppress red glow that Firefox
    // adds to form fields by default,
    // even when user is still typing.
    &:invalid {
      -moz-box-shadow: none;
      box-shadow: none;
    }

    // Kill phantom spacing and dotted
    // border that appears in Firefox.
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
    }
  }

  // Get rid of drop-down arrow
  select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }
}

2_style-select.scss

// `Style <select> arrow
//----------------------------------------------------------------------------------------------------

select,
select[size="0"],
select[size="1"] {
  background-image: image-url("select-arrow.png");
  background-repeat: no-repeat;
  background-position: right center;

  // For WebKit.
  @media (-webkit-min-device-pixel-ratio: 0) {
    padding-right: 30px;
  }
}

// No arrow for multi-select
select[size],
select[multiple] {
  background-image: none;
}

3_test-page.html

<form action="#" method="post" enctype="multipart/form-data" onsubmit="return false">
  <p>
    <input type="checkbox" id="test-checkbox-1" name="test-checkbox-1" />
    <label for="test-checkbox-1">
      Test checkbox 1
    </label>
    &nbsp;
    &nbsp;
    <input type="checkbox" id="test-checkbox-2" name="test-checkbox-2" />
    <label for="test-checkbox-2">
      Test checkbox 2
    </label>
    &nbsp;
    &nbsp;
    <input type="checkbox" id="test-checkbox-3" name="test-checkbox-3" />
    <label for="test-checkbox-3">
      Test checkbox 3
    </label>
  </p>
  <p>
    <input type="radio" id="test-radio-1" name="test-radio-group" />
    <label for="test-radio-1">
      Test radio 1
    </label>
    &nbsp;
    &nbsp;
    <input type="radio" id="test-radio-2" name="test-radio-group" />
    <label for="test-radio-2">
      Test radio 2
    </label>
    &nbsp;
    &nbsp;
    <input type="radio" id="test-radio-3" name="test-radio-group" />
    <label for="test-radio-3">
      Test radio 3
    </label>
  </p>
  <p>
    <label for="select-dd">
      Select drop-down
    </label>
    <br />
    <select id="select-dd" name="select-dd">
      <option>Please select&hellip;</option>
      <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
      </optgroup>
      <optgroup label="Group 2">
        <option value="4">Some text goes here</option>
        <option value="5">Another choice could be here</option>
        <option value="6">Yet another item to be chosen</option>
      </optgroup>
      <optgroup label="Group 3">
        <option value="7">Some text goes here</option>
        <option value="8">Another choice could be here</option>
        <option value="9">Yet another item to be chosen</option>
      </optgroup>
    </select>
  </p>
  <p>
    <label for="select-multi">
      Select multiple
    </label>
    <br />
    <select id="select-multi" name="select-multi" multiple="multiple" size="12">
      <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
      </optgroup>
      <optgroup label="Group 2">
        <option value="4">Some text goes here</option>
        <option value="5">Another choice could be here</option>
        <option value="6">Yet another item to be chosen</option>
      </optgroup>
      <optgroup label="Group 3">
        <option value="7">Some text goes here</option>
        <option value="8">Another choice could be here</option>
        <option value="9">Yet another item to be chosen</option>
      </optgroup>
    </select>
  </p>
  <p>
    <label for="textarea">
      Textarea
    </label>
    <br />
    <textarea id="textarea" name="textarea" rows="5" placeholder="This is an example of HTML5 placeholder text."></textarea>
  </p>
  <p>
    <label for="url">
      URL + Autofocus
    </label>
    <br />
    <input type="url" id="url" name="url" value="http://" autofocus="autofocus" />
  </p>
  <p>
    <label for="email">
      Email
    </label>
    <br />
    <input type="email" id="email" name="email" placeholder="[email protected]" />
  </p>
  <p>
    <label for="password">
      Password
    </label>
    <br />
    <input type="password" id="password" name="password" placeholder="Alphanumeric123!" />
  </p>
</tr>
<tr>
  <p>
    <label for="datetime-local">
      Datetime local
    </label>
    <br />
    <input type="datetime-local" id="datetime-local" name="datetime-local" />
  </p>
  <p>
    <label for="number">
      Number
    </label>
    <br />
    <input type="number" id="number" name="number" min="0" max="999" step="1" />
  </p>
  <p>
    <label for="tel">
      Tel (phone)
    </label>
    <br />
    <input type="tel" id="tel" name="tel" />
  </p>
</tr>
<tr>
  <p>
    <label for="datetime">
      Datetime
    </label>
    <br />
    <input type="datetime" id="datetime" name="datetime" />
  </p>
  <p>
    <label for="date">
      Date
    </label>
    <br />
    <input type="date" id="date" name="date" />
  </p>
  <p>
    <label for="month">
      Month
    </label>
    <br />
    <input type="month" id="month" name="month" />
  </p>
</tr>
<tr>
  <p>
    <label for="search">
      Search
    </label>
    <br />
    <input type="search" id="search" name="search" />
  </p>
  <p>
    <label for="range">
      Range
    </label>
    <br />
    <input type="range" id="range" name="range" />
  </p>
  <p>
    <label for="file">
      File upload
    </label>
    <br />
    <input type="file" id="file" name="file" />
  </p>
  <p>
    <input type="submit" value="Input - Submit" />
    &nbsp;
    <input type="button" value="Input - Button" />
    &nbsp;
    <input type="reset" value="Input - Reset" />
    &nbsp;
    <button>Button tag</button>
  </p>
</form>

Note: This doesn't include styles to build the form elements back up, it just levels the playing field and removes all default visual styling from form elements.

The only reason I included some example Sass to add a <select> arrow is because that's a pain to figure out.

Should you remove -webkit-box-shadow from @-moz-document url-prefix() {}?

Oops, just now saw this comment. Good catch!