in English
ଚୟନ କରନ୍ତୁ |
କଷ୍ଟମ୍ CSS ସହିତ ଦେଶୀ <select>
s କୁ କଷ୍ଟୋମାଇଜ୍ କରନ୍ତୁ ଯାହା ଉପାଦାନର ପ୍ରାରମ୍ଭିକ ରୂପ ପରିବର୍ତ୍ତନ କରେ |
ଏହି ପୃଷ୍ଠାରେ |
ଡିଫଲ୍ଟ |
କଷ୍ଟମ୍ <select>
ମେନୁଗୁଡିକ କେବଳ .form-select
କଷ୍ଟମ୍ ଷ୍ଟାଇଲ୍ ଟ୍ରିଗର୍ କରିବାକୁ ଏକ କଷ୍ଟମ୍ କ୍ଲାସ୍ ଆବଶ୍ୟକ କରେ | କଷ୍ଟମ୍ <select>
ଶ yles ଳୀଗୁଡିକ ପ୍ରାରମ୍ଭିକ ଦୃଶ୍ୟରେ ସୀମିତ ଏବଂ <option>
ବ୍ରାଉଜର୍ ସୀମିତତା ହେତୁ s କୁ ପରିବର୍ତ୍ତନ କରିପାରିବ ନାହିଁ |
<select class="form-select" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ଆକାର
ଆମର ସମାନ ଆକାରର ପାଠ୍ୟ ଇନପୁଟ୍ ସହିତ ମେଳ କରିବାକୁ ଆପଣ ଛୋଟ ଏବଂ ବଡ଼ କଷ୍ଟମ୍ ଚୟନରୁ ମଧ୍ୟ ବାଛିପାରନ୍ତି |
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
multiple
ଗୁଣ ମଧ୍ୟ ସମର୍ଥିତ :
<select class="form-select" multiple aria-label="multiple select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ଯେପରି size
ଆଟ୍ରିବ୍ୟୁଟ୍:
<select class="form-select" size="3" aria-label="size 3 select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ଅକ୍ଷମ
disabled
ଏହାକୁ ଏକ ଧୂସର ରଙ୍ଗର ରୂପ ଦେବା ଏବଂ ସୂଚକ ଇଭେଣ୍ଟଗୁଡିକ ଅପସାରଣ କରିବା ପାଇଁ ଏକ ସିଲେକ୍ଟରେ ବୁଲିଅନ୍ ଆଟ୍ରିବ୍ୟୁଟ୍ ଯୋଡନ୍ତୁ |
<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
ସାସ୍ |
ଭେରିଏବଲ୍ |
$form-select-padding-y: $input-padding-y;
$form-select-padding-x: $input-padding-x;
$form-select-font-family: $input-font-family;
$form-select-font-size: $input-font-size;
$form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image
$form-select-font-weight: $input-font-weight;
$form-select-line-height: $input-line-height;
$form-select-color: $input-color;
$form-select-bg: $input-bg;
$form-select-disabled-color: null;
$form-select-disabled-bg: $gray-200;
$form-select-disabled-border-color: $input-disabled-border-color;
$form-select-bg-position: right $form-select-padding-x center;
$form-select-bg-size: 16px 12px; // In pixels because image dimensions
$form-select-indicator-color: $gray-800;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
$form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding;
$form-select-feedback-icon-position: center right $form-select-indicator-padding;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half;
$form-select-border-width: $input-border-width;
$form-select-border-color: $input-border-color;
$form-select-border-radius: $border-radius;
$form-select-box-shadow: $box-shadow-inset;
$form-select-focus-border-color: $input-focus-border-color;
$form-select-focus-width: $input-focus-width;
$form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-color;
$form-select-padding-y-sm: $input-padding-y-sm;
$form-select-padding-x-sm: $input-padding-x-sm;
$form-select-font-size-sm: $input-font-size-sm;
$form-select-padding-y-lg: $input-padding-y-lg;
$form-select-padding-x-lg: $input-padding-x-lg;
$form-select-font-size-lg: $input-font-size-lg;
$form-select-transition: $input-transition;