diff options
| author | Mark Otto <[email protected]> | 2017-11-24 14:29:59 -0800 |
|---|---|---|
| committer | GitHub <[email protected]> | 2017-11-24 14:29:59 -0800 |
| commit | 2ec1606ab7dc15883d0f0a924046e9dffdc7ba00 (patch) | |
| tree | 9ac332578edb2ea995c3c77d954e22d48241140e /docs | |
| parent | b29e3f2a4c4cf105363ca4153841d0c8e8de3941 (diff) | |
| download | bootstrap-2ec1606ab7dc15883d0f0a924046e9dffdc7ba00.tar.xz bootstrap-2ec1606ab7dc15883d0f0a924046e9dffdc7ba00.zip | |
Custom select updates (#24699)
* Add support for size attribute on custom selects
* Add large custom select, document it and the small variant
* fix custom select focus state
* fix custom file input focus styles
* remove empty line
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/components/forms.md | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 5b79626a2..eba9fc75f 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -1018,6 +1018,46 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th </select> {% endexample %} +You may also choose from small and large custom selects to match our similarly sized text inputs. + +{% example html %} +<select class="custom-select custom-select-lg"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> + +<select class="custom-select custom-select-sm"> + <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 `multiple` attribute is also supported: + +{% example html %} +<select class="custom-select" multiple> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> +{% endexample %} + +As is the `size` attribute: + +{% example html %} +<select class="custom-select" size="3"> + <option selected>Open this select menu</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> +</select> +{% endexample %} + ### 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. |