Styling select fields and options

Question

I have a multi-select field with a lot of options and I want to display them as small chunks instead of displaying a long list of items. I can do this by setting "options" to "display: inline-block", but I have an issue where the options don't go into the second line when they reach the container boundary, but are hidden behind the container.

As you can see here, we cut off the last item and all the following items are invisible.

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

Is there a way to have the options passed to the second line instead of passed behind the container?

Answer 1

By giving the container styles display: flex and flex-wrap:wrap; , options will automatically wrap to the next line limit when the container width is reached.

The following is the updated CSS code:

.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

It seems impossible to do this with the select element. I changed the field structure from "select>options" to "ul>li>checkbox" so that I could style the box and each li the way I wanted. After hiding the checkbox using "appearence: none" the result is the same as the selected one.