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

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" to "ul>li>checkbox"

的字段结构，这样我就可以按照我想要的方式设置框以及每个

li

的样式。使用

"appearence: none"

隐藏复选框后，结果与选择相同。