This chapter will discuss about Bootstrap form select menu. Custom CSS can be used to alter the default appearance of the native <select> elements.
Default
- Custom class .form-select is required for custom <select> menus, to trigger the custom styles.
- Due to browser restrictions, custom styles are only able to change the <select>‘s default appearance and cannot change the <options>s.
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><select class="form-select" aria-label="Default select example"><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></body></html>
Sizing
In order to match the similar sized text inputs, you may also select from small and large custom selects.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example"><option selected>Large Sized Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select><select class="form-select form-select-sm" aria-label=".form-select-sm example"><option selected>Small Sized Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></body></html>
You can give multiple options in drop-down list using multiple attribute.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing_multiple_attributes.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><select class="form-select" multiple aria-label="multiple select example"><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></body></html>
A size attribute restricts the number of options in a drop-down list.https://www.tutorialspoint.com/bootstrap/examples/select_menu_sizing_size_attributes.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap - Select Menu</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><select class="form-select" size="4" aria-label="size 3 select example"><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option><option value="3">Item 4</option></select></html>
Disabled
In order to make a select appear greyed out and eliminate pointer events, add the disabled boolean attribute to it.https://www.tutorialspoint.com/bootstrap/examples/select_menu_disabled.php
Example
You can edit and try running this code using Edit & Run option.
<!DOCTYPE html><html lang="en"><head><title>Bootstrap Form - Select Menu</title><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script></head><body><select class="form-select" aria-label="Disabled select example" disabled><option selected>Select Menu</option><option value="1">Item 1</option><option value="2">Item 2</option><option value="3">Item 3</option></select></html>
Print Page
Leave a Reply