Dev Notes

Various Cheat Sheets and Resources by David Egan/Carawebs.

Select Form Element Styling

CSS, JavaScript
David Egan

Select tags are commonly used in forms:

  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>

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.

  1. Amend bower.json (see below) and run bower install
  2. Make the bootstrap-select style rules available - convert from CSS/LESS into SASS
  3. 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.


Note that bootstrap-select has been added to the “overrides” block.

  "name": "sage",
  "homepage": "",
  "authors": [
    "Ben Word <>"
  "license": "MIT",
  "private": true,
  "dependencies": {
    "modernizr": "2.8.2",
    "jquery": "1.11.2",
    "bootstrap-sass-official": "3.3.4",
    "bootstrap-select": "~1.7.2"
  "overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    "bootstrap-select": {
      "main": "./dist/js/bootstrap-select.js"
    "bootstrap-sass-official": {
      "main": [

Using the library

The easy bit - just create your <select> with the .selectpicker class.

For more options, see the docs.

comments powered by Disqus