Select Form Element Styling

Jun 04, 2015
CSS, JavaScript
David Egan

Select tags are commonly used in forms:

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

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.

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "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": [
        "./assets/stylesheets/_bootstrap.scss",
        "./assets/javascripts/bootstrap/transition.js",
        "./assets/javascripts/bootstrap/alert.js",
        "./assets/javascripts/bootstrap/button.js",
        "./assets/javascripts/bootstrap/carousel.js",
        "./assets/javascripts/bootstrap/collapse.js",
        "./assets/javascripts/bootstrap/dropdown.js",
        "./assets/javascripts/bootstrap/modal.js",
        "./assets/javascripts/bootstrap/tooltip.js",
        "./assets/javascripts/bootstrap/popover.js",
        "./assets/javascripts/bootstrap/scrollspy.js",
        "./assets/javascripts/bootstrap/tab.js",
        "./assets/javascripts/bootstrap/affix.js",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
  }
}

Using the library

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

For more options, see the docs.

Dev Notes

Software Development Resources by David Egan.