WTF, forms?

Checkboxes and radios

<label class="control checkbox">
  <input type="checkbox">
  <span class="control-indicator"></span>
  Check this custom checkbox
</label>

<label class="control radio">
  <input type="radio" id="radio1" name="radio">
  <span class="control-indicator"></span>
  Toggle this custom radio
</label>
<label class="control radio">
  <input type="radio" id="radio2" name="radio">
  <span class="control-indicator"></span>
  Or toggle this other custom radio
</label>

Each checkbox and radio is wrapped in a <label> for three reasons:

1. It provides a larger hit areas for checking the control.
2. It provides a helpful and semantic wrapper to help us replace the default <input>s.
3. It triggers the state of the <input> automatically, meaning no JavaScript is required.

We hide the default <input> with opacity and instead use the <span class="control-indicator"> within the <label> to build a new custom form control.

With the sibling selector (~), we use the :checked state to trigger a makeshift checked state on the custom control.

In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.

Alternate icons

By default, checkboxes use a checkmark and radios use an filled circle. Also included are two modifier classes, .control-x and .control-dash, to change things up should the need arise.

Add the modifier classes to the <label>, like so:

<label class="control checkbox control-x">...</label>

Want to customize the icons further, or use other ones? Download Open Iconic—included are font files, PNGs, and SVGs.

Select menu

<label class="select">
  <select>
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</label>

Similar to the checkboxes and radios, we wrap the <select> in a <label> as a semantic wrapper that we can generate custom styles on with CSS's generated content.

The <select> has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:

• The appearance is reset to none for nearly all styles to correctly apply across modern browsers (meaning not IE9).
• The :-moz-focusring is overridden so that on focus there's no inner border in Firefox.
• The arrow is hidden in Firefox with a media query hack. (There's a longstanding open bug for a native method of addressing this.)
• The arrow is hidden in IE10+ with a simple selector.
• The arrow is hidden in IE9 with a separate media query hack which generates another pseudo-element to literally mask it. Not ideal, but doable.

Heads up! This one comes with some quirks right now:

• Clickability is limited in IE9.
• Firefox's dropdown of options looks rather ugly.
• The custom caret is unable to receive the selected state's color.

Any ideas on improving these are most welcome.

Multiple select

File browser

<label class="file">
  <input type="file" id="file">
  <span class="file-custom"></span>
</label>

The file input is the most gnarly of the bunch. Here's how it works:

• We wrap the <input> in a <label> so the custom control properly triggers the file browser.
• We hide the default file <input> via opacity.
• We use :after to generate a custom background and directive (Choose file...).
• We use :before to generate and position the Browse button.
• We declare a height on the <input> for proper spacing for surrounding content.

In other words, it's an entirely custom element, all generated via CSS.

Heads up! The custom file input is currently unable to update the Choose file... text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.

FAQs

What about every other form control?

For the time being, WTF, forms? is limited to checkboxes, radio buttons, select menus, and file inputs. Additional custom inputs will depend on browser support.

Why are there no for attributes?

We nest our <input>s and <select>s within a <label>, so there's no need to specify a for attribute as the browser will automatically associate the two.

What about hover states?

Basic hover styles have been included, but they've been commented out because they are sticky on iOS. Uncomment if you really need it.

Does this require JavaScript?

Not for the time being, however, the file input might be better off with it.

Will this be added to Bootstrap?

Possibly, but not until v4 at the earliest.

Is this screen reader friendly?

Honestly, no idea right now.

Changelog

For a full changelog, visit the releases page on GitHub.

This project utilizes SemVer for versioning releases for maximum backward compatibility.