Select tags are commonly used in forms:
This looks unstyled and brutal:
Impossible to Style
It’s not possible to apply style rules to select/option tags directly, unless I’, missing something.
The bootstrap-select Solution
Using Bootstrap-select, Bootstrap 3 dropdown styles can be added to the option dropdown.
Bootstrap-Select Install
Bootstrap select on Bower.
- Install via Bower:
bower install bootstrap-select
- Enqueue JS files
- Use bootstrap-select styles
Using with Sage
Refers to the Sage WordPress Starter Theme.
- Amend
bower.json
(see below) and run bower install
- Make the
bootstrap-select
style rules available - convert from CSS/LESS into SASS
- One option: copy (via gulp if necessary)
bootstrap-select.css
into a new _bootstrap-select.scss
file, and import this in assets/styles/main.scss
Amended bower.json will build the bootstrap-select
javascript file into main.js
by means of Asset Builder.
bower.json
Note that bootstrap-select has been added to the “overrides” block.
Using the library
The easy bit - just create your <select>
with the .selectpicker
class.
For more options, see the docs.