css make options select appear next to each other in rows-CodePudding

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  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?

CodePudding user response：

You cannot modify select in this way unfortunately.

You can just do it another way using checkboxes, something like this:

CSS

.grid-container{
    display:grid !important;
    width:100%;
    border:none;
    overflow:hidden;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

HTML

<div >
<label for="color1">
    Option 1
    <input type="checkbox" id="option-1" name="inputName[]">
</label>
<label for="color2">
    Option 2
    <input type="checkbox" id="option-2" name="inputName[]">
</label>
<label for="color3">
    Option 3
    <input type="checkbox" id="option-3" name="inputName[]">
</label>
<label for="color4">
    Option 4
    <input type="checkbox" id="option-4" name="inputName[]">
</label>