Base Styling of HTML4 Form Elements

[sfrisk]

• Form
• Fieldset
• Legend
• Input ( text | password | checkbox | radio | submit | reset | file | hidden | image | button )
• Label
• Select
• Textarea

[jslegers]

I would go for a mixture of features of Normalize.css and Blueprint.

With regards to look-and-feel, I would opt for something not very different from the Github look-and-feel. Github is rather minimalistic and clean and at par with modern design standards.

Also, I believe that users should be able to cherrypick which features they want and/or customize them on a per feature basis, using SCSS.

See also #7.

[cbracco]

I think having a solid base reset for form elements is important, since they can be tricky to control. Below is a thin base collection of styles that I often use to get forms to play a bit nicer cross-browser:

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native
 *    <audio> and <video> controls
 * 2. Improve usability and consistency of cursor style between
 *    image-type <input> and others
 */
button,
html input[type="button"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
  cursor: pointer;
  /* 2 */
}

/* 1. Fix vertical alignment inconsistencies */
input[type="color"],
input[type="range"] {
  vertical-align: middle;
  /* 1 */
}

/**
 * 1. Set `min-width` to 0 to avoid overflow issues in Chrome
 * 2. Remove default `margin`, `padding`, and `border` across browsers
 */
fieldset {
  min-width: 0;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 2 */
  border: 0;
  /* 2 */
  /* Remove `margin-bottom` from the last element in a <fieldset> */
}

fieldset > *:last-child {
  margin-bottom: 0;
}

/* Make checkbox, image, and radio inputs `inline-block` by default */
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  display: inline-block;
  width: auto;
}

/* 1. Constrict `max-width` for file inputs to avoid overflow issues */
input[type="file"] {
  max-width: 100%;
  /* 1 */
  cursor: pointer;
}

/* Set search inputs to `border-box` by default */
input[type="search"] {
  box-sizing: border-box;
}

/**
 * 1. Remove `padding` so people aren't caught out if they zero out fieldsets
 * 2. Correct `color` not being inherited in IE 8/9
 */
legend {
  font-weight: 700;
  padding: 0;
  /* 1 */
  color: #222222;
  border: 0;
  /* 2 */
}

/**
 * 1. Restrict <textarea> elements to vertical resizing only
 */
textarea {
  resize: vertical;
  /* 1 */
}

Then I'll typically do something like this to get all the input fields to be the same height, which helps with gridded form layouts:

.form-label {
  display: inline-block;
  margin-bottom: 0.25rem;
}

/* 1. Specified so Safari gives `.form-legend` elements 100% width */
.form-legend {
  width: 100%;
  /* 1 */
}

/**
 * Give certain <input>, <select>, and <textarea> elements some default
 * styles
 */
.form-input[type="date"],
.form-input[type="datetime"],
.form-input[type="datetime-local"],
.form-input[type="email"],
.form-input[type="month"],
.form-input[type="number"],
.form-input[type="password"],
.form-input[type="search"],
.form-input[type="tel"],
.form-input[type="text"],
.form-input[type="time"],
.form-input[type="url"],
.form-input[type="week"],
.form-select,
.form-textarea {
  line-height: 1;
  display: block;
  width: 100%;
  height: 44px;
  padding: 8px;
  vertical-align: middle;
  color: #222222;
  border: 1px solid #dedede;
  border-radius: 3px;
  outline: 0 none;
}

.form-input[type="date"]:focus,
.form-input[type="datetime"]:focus,
.form-input[type="datetime-local"]:focus,
.form-input[type="email"]:focus,
.form-input[type="month"]:focus,
.form-input[type="number"]:focus,
.form-input[type="password"]:focus,
.form-input[type="search"]:focus,
.form-input[type="tel"]:focus,
.form-input[type="text"]:focus,
.form-input[type="time"]:focus,
.form-input[type="url"]:focus,
.form-input[type="week"]:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #1fa3ec;
  outline: 0 none;
  box-shadow: inset 0.1rem 0.1rem 0.238rem rgba(0, 0, 0, 0.15);
}

/**
 * 1. Increase padding to correct line-height in Firefox
 * 2. Give <select> menus a solid background color
 */
.form-select {
  padding: 10px;
  /* 1 */
  background: #f8f8f8;
  /* 2 */
}

/* 1. Resets for <textarea> only */
.form-textarea {
  height: auto;
  /* 1 */
  line-height: 1.5;
  /* 1 */
}

[jslegers]

@cbracco :

Why do search fields have box-sizing: border-box by default but not other form fields? That seems rather inconsistent to me.

Doesn't it make more sense to either set box-sizing: border-box as a default for all forms fields or not set it as a default for any form fields?

[cbracco]

Because normalize.css explicitly sets the search input to be content-box, see here: https://github.com/necolas/normalize.css/blob/master/normalize.css#L351

I find in most situations when I use that input I prefer it to use border-box like the rest of the elements, so I override it explicitly in my reset, instead of modifying core normalize.css because its just easier for me to maintain it that way.

[sfrisk]

@cbracco @jslegers
We also have a discussion about the use of box-sizing over at the beginning of the Normalization Thread.

Also can I just say how much I like seeing inputs and buttons get the pointer cursor? That's always a huge pet peeve for me when that doesn't happen automatically.

[MichaelArestad]

How much styling is planned? Whatever we do will become the default styles (like it or not) for many projects that use this. I would lean toward a cohesive set of styles that are unique to CSS-Chassis that are a little more than just base styling.

[arschmitz]

@MichaelArestad well there are two pieces to this.

1.) Base styles for css only form elements which will likely be minimal

2.) A more customized styling which requires JS ( either from jquery UI/Mobile or another js library implementing the css-chassis standard )

I would probably expect 1 to be more generic while 2 will be much more unique just due to cross browser limitations of css styles on form elements.

[MichaelArestad]

Ah. Perfect.

1 == bare minimum styles (normalizeish)
2 == css-chassis styles. (potentially also minimal, but useable out of the box)