css make options select appear next to each other in rows


I have made a colorpicker on the shop pages of a woocommerce store.
On the backend, a client can make variations and set the colors for each variation.
On the frontside the customer can choose this color and then add it to the basket.

What is working now, is with display:inline-block to make the options appear next to eachother.
However, when a product has many color variations, the options are to wide for the column.
So i want the options to fit into the column width and start on the next row if full.
However, this doesnt seem to work. I tried display grid and display flex on the parent item (select), use float:left and so on but no succes so far.

I want 4 items next to eachother, then another row of four items.

HTML:

    <select size="8" id="kleuren">
<option class="colorpicker-pick" style="border-color: rgb(255, 255, 255); background-image: url(); background-repeat: no-repeat; background-position: left center;"></option>
<option value="956" style="background-color: rgb(26, 178, 216)"></option>
<option value="960" style="background-color: rgb(221, 11, 11)"></option>
<option value="961" style="background-color: rgb(255, 255, 255)"></option>
<option value="962" style="background-color: rgb(211, 211, 211)"></option>
<option value="963" style="background-color: rgb(129, 215, 66)"></option>
<option value="964" style="background-color: rgb(221, 145, 31)"></option>
<option value="965" style="background-color: rgb(0, 0, 0)"></option>
<option value="966" style="background-color: rgb(237, 237, 7)"></option>
    </select>

Anybody?



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article

WR Joshua Manning discusses offer from dad's alma mater

Next Article

2025 BMW electric sedan could split 3-Series, while i5 and i7 preserve ICE form

Related Posts