<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:
<input>s.<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.
+ +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.
+ +<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:
appearance is reset to none for nearly all styles to correctly apply across modern browsers (meaning not IE9).:-moz-focusring is overridden so that on focus there's no inner border in Firefox.Heads up! This one comes with some quirks right now:
+ +options looks rather ugly.color.Any ideas on improving these are most welcome.
+ +<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:
+ +<input> in a <label> so the custom control properly triggers the file browser.<input> via opacity.:after to generate a custom background and directive (Choose file...).:before to generate and position the Browse button.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.
+ +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.
+ +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.
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.
+ +Not for the time being, however, the file input might be better off with it.
+ +Possibly, but not until v4 at the earliest.
+ +Honestly, no idea right now.
+ +For a full changelog, visit the releases page on GitHub.
+ +This project utilizes SemVer for versioning releases for maximum backward compatibility.
+ +