css 使选项 select 并排显示

Question

我在 woocommerce 商店的商店页面上制作了一个颜色选择器。在后端，客户可以做出变化并为每个变化设置颜色。在正面顾客可以选择这个颜色然后加入购物车。

现在有效的是 display:inline-block 使选项彼此相邻出现。但是，当产品有多种颜色变化时，该列的选项就太宽了。所以我希望选项适合列宽，如果已满则从下一行开始。但是，这似乎不起作用。我尝试在父项 (select) 上显示网格和显示 flex，使用 float:left 等等，但到目前为止没有成功。

我想要 4 个并排的项目，然后是另一排的 4 个项目。

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>

有人吗？

Answer 1

很遗憾，您不能以这种方式修改 select。

您可以使用复选框以另一种方式进行操作，如下所示：

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 class="grid-container">
<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>

css 使选项 select 并排显示

css make options select appear next to each other in rows

css

wordpress

drop-down-menu