Accoutrement 2.1.1

button

scss
button {
  overflow: visible;
}

Internet Explorer 11-

input

scss
input {
  border-radius: 0;
  line-height: normal;
}
  • Border-radius: iOS 8+ |
  • Line-height: Firefox 4+

button, [type='button'], [type='reset'], [type='submit']

scss
button,
[type='button'],
[type='reset'],
[type='submit'] {
  appearance: button;
  cursor: pointer;

  &::-moz-focus-inner {
    border: 0 none !important;
    padding: 0 !important;
  }
}

Appearance, cursors, and inner-focus for buttons and button-like inputs.

  • Appearance: iOS 8+

[type='checkbox'], [type='radio']

scss
[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

Address box sizing set to content-box in IE 8/9/10. Remove excess padding in IE 8/9/10.

[type='number']

scss
[type='number'] {
  width: auto;
}

Firefox 36+

[type='search']

scss
[type='search'] {
  appearance: textfield;
}

Chrome 45+, Safari 9+

button, input, select, textarea

scss
button,
input,
select,
textarea {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

Specify the background-color, and the inherited color/font of form elements.

textarea

scss
textarea {
  overflow: auto;
  resize: vertical;
}

Remove default vertical scrollbar in IE 8/9/10/11, and specify the resizability of textareas.