是否可以应用网格样式来选择纯 CSS 的选项？ [复制]答案

【问题标题】：Is it possible to apply grid style to select options with pure CSS? [duplicate]是否可以应用网格样式来选择纯 CSS 的选项？ [复制]
【发布时间】：2021-12-27 15:17:38
【问题描述】：

请帮助我将 display:grid 样式应用于带有 OPTION 的 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

感谢您的帮助！

【问题讨论】：

你无法自定义像 select 这样的原生 HTML 元素
造型select 太难了，如果可能的话，我认为在其中有一个网格一定非常困难。我想自定义那么多使用ul/ol 和li，用JavaScript 为主题赋予价值。

标签： html css

【解决方案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>

【讨论】：