設定選擇欄位和選項的樣式

Question

我有一個多選字段，其中有很多選項，我想將它們顯示為小塊，而不是顯示一長串項目。我可以透過將「選項」設為「display: inline-block」來做到這一點，但是我遇到一個問題，即選項在到達容器邊界時不會進入第二行，而是隱藏在容器後面。

正如您在這裡看到的，我們切斷了最後一個項目，並且以下所有項目都不可見。

.column-select {
    width: 100%;
}
.column-select option {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 5px;
    background: #2b3035;
    color: #FFFFFF;
    margin: 5px;
    outline: none;
}

有沒有辦法讓選項傳遞到第二行而不是傳遞到容器後面？

Answer 1

透過賦予容器樣式 display: flex 和 flex-wrap:wrap; ，選項在達到容器寬度時將自動換行到下一行限制。

以下是更新後的 CSS 程式碼：

.column-select {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.column-select option {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #2b3035;
  color: #FFFFFF;
  margin: 5px;
  outline: none;
}

Answer 2

似乎不可能用 select 元素來做到這一點。我將字段結構從“select>options”更改為“ul>li>checkbox”，這樣我就可以按照自己想要的方式設定框以及每個li的樣式。使用“appearence: none”隱藏複選框後，結果與選取的結果相同。