能否修改HTML中select元素样式，实现选项并排无下拉展示？

当然可以实现，但原生<select>元素的样式受浏览器原生UI限制，没法直接改成你要的横向并排无下拉效果，通常我们会用以下两种方案来满足需求：

方案一：用单选按钮组模拟（推荐） #

用<input type="radio">配合<label>是最稳妥的方式，既能保留“单选选择”的核心功能，又能完全自定义成横向并排的样式。

示例代码：

<style>
/* 隐藏原生单选按钮 */
.custom-radio-group input[type="radio"] {
  display: none;
}

/* 自定义选项的基础样式 */
.custom-radio-group label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

/* 选中状态的高亮样式 */
.custom-radio-group input[type="radio"]:checked + label {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
</style>

<div class="custom-radio-group">
  <input type="radio" name="custom-option" id="opt1" value="option1" checked>
  <label for="opt1">option1</label>
  
  <input type="radio" name="custom-option" id="opt2" value="option2">
  <label for="opt2">option2</label>
  
  <input type="radio" name="custom-option" id="opt3" value="option3">
  <label for="opt3">option3</label>
</div>

这个方案的好处是：

• 样式完全可控，想怎么调整就怎么调整
• 保留了单选逻辑，同一组里只能选一个选项
• 所有浏览器都兼容，不会出现奇怪的兼容性问题

方案二：尝试修改原生select（不推荐） #

如果硬要基于<select>改，最多只能通过CSS隐藏下拉箭头，但没法改变它“下拉展开选项”的核心行为，而且不同浏览器的兼容性很差，根本实现不了选项横向并排的效果。举个例子仅供参考：

<style>
select {
  /* 隐藏下拉箭头，不同浏览器需要写不同前缀 */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 24px 8px 8px;
  border: 1px solid #ccc;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%23666" d="M6 9L1 4h10z"/></svg>') no-repeat right 8px center;
}
</style>
<select>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>

这种方式只是改了外观，本质还是下拉控件，完全达不到你要的“选项横向并排”的效果，所以不建议用。

内容的提问来源于stack exchange，提问作者Elias