2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00

overhaul custom selects with latest from primer, shoutout

This commit is contained in:
Mark Otto
2015-08-18 19:26:18 -07:00
parent 15b7ce59df
commit 58d1297fcb
2 changed files with 38 additions and 123 deletions
+8 -25
View File
@@ -655,35 +655,18 @@ Custom checkboxes and radios are inline to start. Add a parent with class `.c-in
### Select menu
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.
Custom `<select>` menus need only a custom class, `.c-selecct` to trigger the custom styles.
{% example html %}
<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>
<select class="c-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{% endexample %}
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](https://bugzilla.mozilla.org/show_bug.cgi?id=649849) 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:
- `select[multiple]` is currently currently **not supported**.
- Clickability is limited in IE9.
- Firefox's dropdown of `option`s looks rather ugly.
- The custom caret is unable to receive the selected state's `color`.
Any ideas on improving these are most welcome.
Custom selects degrade nicely in IE9, receiving only a handful of overrides to remove the custom `background-image`. **Multiple selects (e.g., `<select multiple>`) are not currently supported.**
### File browser