Bootstrap-select plugin: how to avoid flickering

Question

The Bootsrap-select plugin is amazing (http://silviomoreto.github.io/bootstrap-select/). It provides an extremely easy way of creating gorgeous select menus in Bootstrap. The one problem I've encountered with it, however, is "flickering" on page load. What I mean by this is fairly straight forward:

1. The page loads with original HTML select element (which of course looks like crap)
2. The Bootstrap-select plugin JS runs
3. At some noticeable time after the page loads the original HTML select element is converted to a nice Bootstrap-select element by JS in Step (2).

So, the user first sees the HTML select element and then sees it switch to the pretty Bootstrap-select item, thus the "flickering".

Has anyone found a good solution to the problem?

Answer 1

To show a blank until bootstrap-select is loaded, add this to your css.

select {
   visibility: hidden;
}