是否可以应用网格样式来选择纯CSS选项

Question

请帮助我将display:grid样式应用于带OPTIONs的SELECT标记。我需要使用没有JS的纯CSS。

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

<select multiple>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
</select

谢谢你的帮助！

Answer 1

不，你不能。但是你可以用这个把戏。

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

<div class="my-select-box">
<label for="option-1">
Option 1
<input type="checkbox" id="option-1" name="inputName[]">
</label>
<label for="option-2">
Option 2
<input type="checkbox" id="option-2" name="inputName[]">
</label>
<label for="option-3">
Option 3
<input type="checkbox" id="option-3" name="inputName[]">
</label>
<label for="option-4">
Option 4
<input type="checkbox" id="option-4" name="inputName[]">
</label>
</div>