Bootstrap Select is a form control that shows a collapsible list of different values that can be selected. This can be used for displaying forms or menus to the user. This article shows the methods by which a <select> element can be styled in Bootstrap, using both custom styles and bootstrap-select.
Using the default custom styles: Bootstrap has custom styles that can be applied to some form elements. Custom select menus require only one custom class, that is, .custom-select to trigger the custom styles. However, custom styles are restricted to the select’s initial appearance and cannot alter the option’s due to browser limitation. The example below represents how the default <select> element can be styled using .custom-select in Bootstrap.
There are only some style properties that can be applied to the <option> component. This is because this sort of component is a case of a “replaced component”. They are OS-dependent and are not the portion of the HTML/browser. It cannot be styled through CSS. Except for background-color and color, the style settings applied through the style object for the <option> component are disregarded.
The select option is styled by the Operating System, not by HTML. Hence the CSS style does not have any impact.
In general, the above values will work. However, we can not customize the padding, margin, and other properties.
Bootstrap-select: To solve the above problems, bootstrap-select can be used to style <option> and <select> tags.
Note: By default, bootstrap-select naturally recognizes the version of Bootstrap that is being used. However, there are a few occurrences where the version detection may not work.
The below example shows how bootstrap-select can be included in the page and initialized. The selectpicker class is used in the select components to auto-initialize bootstrap-select as explained in the example:
Below are some attributes that can be used to style the <select> tag:
- data-live-search: It allows us to add a search input.
- data-tokens: It allows us to add keywords to options to improve their search ability.
- data-max-options: It allows us to specify the limit the number of options that can be selected. It also works for option groups.
- title: This attribute allows us to set the default placeholder text when nothing is selected.
- data-style: This attribute helps us to style the button classes.
- show-tick: This attribute helps us to show the checkmark icon on standard select boxes.
- data-width: This attribute helps us to set the width of the select.
Below are some attributes that can be used to style the <option> tag:
- data-icon: It is used to add an icon to an <option> or <optgroup>.
- data-content: It is used to insert custom HTML into the <option>.
- data-subtext: It is used to add a subtext to an <option> or <optgroup> element.
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses
are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!