jquery通過css自定義select2組件

Question

我無法弄清楚如何自定義select2。你能否給出一些例子或者鏈接來解釋它的資源。我找不到任何地方的計算器和谷歌

特別是我很感興趣如何改變這種搜索框。

Answer 1

我也想自定義窗口小部件，並結束了與此：

由於沒有主題支持我決定把下面的代碼後select2.css

/* _select2-custom.scss */ 

/* Applies to container when is shown above and below */ 
.select2-container, 
.select2-dropdown-open.select2-drop-above { 

    width: auto !important; 
    /* Button */ 
    > a.select2-choice 

     /* require bootstrap-sass */ 
     @extend .btn; 
     line-height: 26px; 
     padding:0 4px 0 4px; 

     /* Button Text */ 
     .select2-chosen{ 
      width:100%; 
      padding-left: 12px; 
      padding-right: 12px; 
      margin-right: 12px; 
      text-align: left; 
      color:$gray; 

      /* Text Without Selection */ 
      &.select2-default{ 
       color:$grayLighter; 
      } 
     } 

     /* Button arrow */ 
     .select2-arrow{ 
      border-color:#BBB; 
      background:none; 
     } 
    } 
} 

/* When button is :hover or :active */ 
.select2-container-active { 
     > a.select2-choices, 
     > a.select2-choice{ 
      border-color: rgba(168, 168, 168, 0.8); 
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(168, 168, 168, 0.6); 
      transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 
     } 
} 

/* Delete Button */ 
.select2-container.select2-allowclear .select2-choice .select2-chosen{ 
    margin-right: 24px; 
} 

/* Selection */ 
.select2-drop, 
.select2-drop.select2-drop-above, 
.select2-drop-active { 
    border: 1px solid $selectBorder; 
    border-radius: 2px; 

    margin-top:4px; 
    margin-bottom:4px; 

    /*  */ 
    min-width: 180px !important; 
} 

.select2-results{ 

    li + li { border-top:1px solid $selectHeader; } 

    .select2-no-results{ 
     color:$grayLight; 
     background-color: transparent; 
    } 

    .extra{ 
     display:block; 
    } 
} 

.select2-search{ 
    background-color: $selectHeader; 
    padding-left: 6px; 
    padding-right: 6px; 
    padding-top: 10px; 

    /* Search input field */ 
    input[type=text], 
    input[type=text]:focus{ 
     box-shadow:none; 
     border-color: $selectBorder; 
    } 
} 

有有些事情要記住：

• 全部選擇器必須具有相同或更高的特異性。
• 寬度爲.select-drop，也許其他規則必須包含要應用的！important修飾符，因爲它們由插件內聯設置。