Hướng dẫn css select option bootstrap - css chọn tùy chọn bootstrap

Mặc định

Các menu tùy chỉnh chỉ cần một lớp tùy chỉnh, .form-select để kích hoạt các kiểu tùy chỉnh.Các kiểu tùy chỉnh được giới hạn trong sự xuất hiện ban đầu của ____ ____ 6 và không thể sửa đổi các ____99 do các giới hạn của trình duyệt.

Nội dung chính Show

• Mặc định
• Kích thước
• Vô hiệu hóa

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

Kích thước

Bạn cũng có thể chọn từ các lựa chọn tùy chỉnh nhỏ và lớn để phù hợp với các đầu vào văn bản có kích thước tương tự của chúng tôi.

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

Thuộc tính

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

0 cũng được hỗ trợ:

<select class="form-select" multiple aria-label="multiple select example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

Như thuộc tính

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

1:

<select class="form-select" size="3" aria-label="size 3 select example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

Vô hiệu hóa

Thêm thuộc tính boolean

<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

<select class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

2 trên một chọn để cung cấp cho nó một hình dạng màu xám và xóa các sự kiện con trỏ.

<select class="form-select" aria-label="Disabled select example" disabled>
  <option selected>Open this select menuoption>
  <option value="1">Oneoption>
  <option value="2">Twooption>
  <option value="3">Threeoption>
select>

Sass

Biến

$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,");

$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;

Đọc tiếp