Bootstrap Select Box
This Bootstrap select box uses radio buttons to select an option. Although the radio buttons are hidden, clicking the label still clicks the radio button. This select box offers more consistency in graphic styles, and allows you to add buttons, icons, or anything you wish to the dropdown. |
|
Default Select | Bootstrap Select |
---|---|
|
- Usability
- The new select box will have a more consistent appearance in the app, clickable areas will be more than doubled, and it allows the options to contain custom content.
- Labels
- The radio buttons work because clicking a label activates the radio button inside. Make sure not to remove the labels.
- Scrolling
- The dropdown displays 10 items, after which it will scroll. To change this, dropdown-menu should have its max-height adjusted.
See the Pen Bootstrap Select Box by btn.ninja (@btn-ninja) on CodePen.