custom-select custom-select-sm
bootstrap5.css
bootstrap5.css
.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
height: calc(1.5em + 0.5rem + 2px);
}
bootstrap5.css
.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.875rem;
line-height: 1.5;
border-radius: 0.2rem;
}
bootstrap5.css
.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
padding-right: 1.75rem;
}
bootstrap5.css
.custom-select-sm {
height: calc(1.5em + 0.5rem + 2px);
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
font-size: 0.875rem;
}
html bootstrap5 Sample
プルダウンメニュー 小:custom-select-sm
<form>
<select class="custom-select custom-select-sm">
<option selected>選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>