The limits of CSS styling select options

By on   1 comment 150 words

Sometimes you learn the most from failures!

I wanted a <select multiple> element where the <options> were laid out in a grid. I nearly got there.

It's possible to have the <option>s in a horizontal row - but only on Chrome and Firefox.

Here's a quick fiddle showing the results:

As you can see, it's possible to do some pretty extravagant styling of the individual <options> you can even change how they look when they're selected.

But it's impossible to get them to wrap using a flexbox or grid approach. It seems the only layout options are a vertical or horizontal list.

Why, yes, I should probably have used <input type="checkbox"> instead!

Share this post on…

One thought on “The limits of CSS styling select options

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.