ಮುಖ್ಯ ವಿಷಯಕ್ಕೆ ತೆರಳಿ ಡಾಕ್ಸ್ ನ್ಯಾವಿಗೇಶನ್‌ಗೆ ತೆರಳಿ
in English

ಆಯ್ಕೆ ಮಾಡಿ

<select>ಅಂಶದ ಆರಂಭಿಕ ನೋಟವನ್ನು ಬದಲಿಸುವ ಕಸ್ಟಮ್ CSS ನೊಂದಿಗೆ ಸ್ಥಳೀಯ s ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ .

ಡೀಫಾಲ್ಟ್

ಕಸ್ಟಮ್ ಶೈಲಿಗಳನ್ನು ಪ್ರಚೋದಿಸಲು ಕಸ್ಟಮ್ <select>ಮೆನುಗಳಿಗೆ ಕಸ್ಟಮ್ ವರ್ಗ ಮಾತ್ರ ಅಗತ್ಯವಿದೆ . .form-selectಕಸ್ಟಮ್ ಶೈಲಿಗಳು <select>ಆರಂಭಿಕ ನೋಟಕ್ಕೆ ಸೀಮಿತವಾಗಿವೆ <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:       $input-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-border-radius-sm:    $input-border-radius-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-border-radius-lg:    $input-border-radius-lg;

$form-select-transition:          $input-transition;