Bootstrap 5 Input Groups are used to extend form controls by adding the buttons, text, or button groups before or after the text inputs, custom selects, or file inputs.
Bootstrap 5 Input group Custom select Classes: There is no specific class used to input group custom select. We use combinations of input-group classes with <select> tag and <option> tag within as needed.
Syntax:
<div class="input-group ...">
<label class="input-group-text" for="">...</label>
<select class="form-select" id="">
<option selected>....</option>
<option value="1">....</option>
<option value="2">....</option>
...
</select>
</div>
Example 1: This example illustrates how to custom-select elements from the options menu on the downside of the text input.
<!DOCTYPE html>
<html lang="en">
<head>
<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/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container text-center ">
<div class="mt-1">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Input group Custom select</h5>
</div>
<div class="input-group p-3">
<label class="input-group-text text-bg-success"
for="inputGroupSelect01">Select</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>Select the Course</option>
<option value="1">Btech</option>
<option value="2">MBBS</option>
<option value="3">MBA</option>
<option value="4">BSC</option>
</select>
</div>
<div class="input-group p-3">
<select class="form-select" id="inputGroupSelect01">
<option selected>Select a Car</option>
<option value="1">Audi</option>
<option value="2">Alto 800</option>
<option value="3">Swift</option>
<option value="4">Xuv-700</option>
</select>
<label class="input-group-text text-bg-success"
for="inputGroupSelect01">
Select
</label>
</div>
</div>
</body>
</html>
Output:
Example 2: In this example, illustrates how to custom-select elements from the options menu and adding a button on the left of the text input.
<!DOCTYPE html>
<html lang="en">
<head>
<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/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container text-center ">
<div class="mt-1">
<h1 class="text-success">GeeksforGeeks</h1>
<h5>Bootstrap 5 Input group Custom select</h5>
</div>
<div class="input-group p-3">
<button class="btn btn-success">
Button
</button>
<select class="form-select" id="inputGroupSelect02">
<option selected>Choose a Color</option>
<option value="1">Red</option>
<option value="2">yellow</option>
<option value="3">Pink</option>
<option value="4">Green</option>
</select>
</div>
<div class="input-group p-3">
<select class="form-select" id="inputGroupSelect02">
<option selected>Choose a City</option>
<option value="1">Agra</option>
<option value="2">Mathura</option>
<option value="3">Kanpur</option>
<option value="4">Lucknow</option>
</select>
<button class="btn btn-success">
Button
</button>
</div>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/forms/input-group/#custom-select