Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters or emoji.
</p>
{% endexample %}
...
...
@@ -607,33 +607,33 @@ Each checkbox and radio is wrapped in a `<label>` for three reasons:
- It provides a helpful and semantic wrapper to help us replace the default `<input>`s.
- It triggers the state of the `<input>` automatically, meaning no JavaScript is required.
We hide the default `<input>` with `opacity` and use the `.c-indicator` to build a new custom form control. We can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
We hide the default `<input>` with `opacity` and use the `.custom-control-indicator` to build a new custom form indicator in its place. Unfortunately we can't build a custom one from just the `<input>` because CSS's `content` doesn't work on that element.
With the sibling selector (`~`), we use the `:checked` state to trigger a makeshift checked state on the custom control.
We use the sibling selector (`~`) for all our `<input>` states—like `:checked`—to properly style our custom form indicator. When combined with the `.custom-control-description` class, we can also style the text for each item based on the `<input>`'s state.
In the checked states, we use **base64 embedded SVG icons** from [Open Iconic](https://useiconic.com/open). This provides us the best control for styling and positioning across browsers and devices.
<spanclass="custom-control-description">Check this custom checkbox</span>
</label>
{% endexample %}
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<spanclass="custom-control-description">Or toggle this other custom radio</span>
</label>
{% endexample %}
#### Disabled
Custom checkboxes and radios can also be disabled. Add the `disabled` boolean attribute to the `<input>` and the custom indicator and label description will be automatically styled.
<spanclass="custom-control-description">Or toggle this other custom radio</span>
</label>
</div>
{% endexample %}
### Select menu
Custom `<select>` menus need only a custom class, `.c-select` to trigger the custom styles.
Custom `<select>` menus need only a custom class, `.custom-select` to trigger the custom styles.
{% example html %}
<selectclass="c-select">
<selectclass="custom-select">
<optionselected>Open this select menu</option>
<optionvalue="1">One</option>
<optionvalue="2">Two</option>
...
...
@@ -690,14 +709,16 @@ Custom selects degrade nicely in IE9, receiving only a handful of overrides to r
### File browser
The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.
The file input is the most gnarly of the bunch. Here's how it works:
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`.
...
...
@@ -706,5 +727,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
- 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.
