仅使用纯CSS能否为select标签的option选项应用grid布局？

实现方案 #

你之前的代码不生效是因为原生<option>标签默认带display: list-item属性，无法被自动识别为grid容器的子项，需要显式重置option的样式让grid布局生效，以下是纯CSS实现的完整可运行代码：

CSS代码

select[multiple] {
  display: grid !important;
  width: 100%;
  overflow: hidden;
  border: none;
  /* 3行3列的网格布局 */
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px; /* 可选：设置选项之间的间距 */
  padding: 8px;
  height: auto; /* 清除浏览器默认的select高度限制 */
}

/* 关键配置：重置option默认样式，使其成为合法的grid子项 */
select[multiple] option {
  display: block;
  padding: 8px 0;
  margin: 0;
  border: 1px solid #e5e7eb;
  text-align: center;
  cursor: pointer;
}

/* 可选：自定义选中状态样式 */
select[multiple] option:checked {
  background-color: #1677ff;
  color: #ffffff;
}

HTML代码

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

注意事项 #

• 该方案仅支持带multiple属性的多选select，普通单选select的下拉选项是浏览器原生渲染的弹出层，不属于页面DOM结构，无法通过CSS修改布局
• 不同浏览器的原生select默认样式差异较大，建议先引入通用CSS Reset清除默认样式后再做自定义，避免兼容性问题
• 如果有超低版本浏览器兼容需求，建议提前做兼容性测试，部分IE老旧版本不支持修改select内部option的布局属性

内容的提问来源于stack exchange，提问作者Игорь Шепель