设置选择字段和选项的样式

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”隐藏复选框后，结果与选择的结果相同。