是否可以将 `<select>` 设置为表现得像普通的`<div>`？答案

【问题标题】：Is it possible to style a `<select>` to behave like a vanilla `<div>`?是否可以将 `<select>` 设置为表现得像普通的`<div>`？
【发布时间】：2020-05-29 13:14:17
【问题描述】：

有没有办法设置以下标记的样式……

<select>
  <option>Canteloupe</option>
  <option>Canteloupe</option>
  <option selected>Crabapple</option>
</select>

... 让所有选项同时可见？

我希望它的行为就好像所有元素都是<div>s，所以我可以为表单的打印版本布置每个选项。

像这样：

<div>
  <div>Canteloupe</div>
  <div>Canteloupe</div>
  <div>Crabapple</div>
</div>

我试过-webkit-appearance: none，它会移除操作系统外观，但不会阻止选择元素隐藏其未选择的<option>s。

许多内置的 html 元素可以将其内置样式覆盖“回到无”，但似乎<select> 具有魔力，并且具有无法撤消的用户代理行为。

我不必支持旧浏览器（例如 IE11）

【问题讨论】：

这能回答你的问题吗？ Is it possible to show all options from an HTML Select form field at once without clicking it?

标签： html css forms print-style

【解决方案1】：

对于您的情况，我认为使用 multiple 属性将是一种有效的方式来布置打印的所有选项：

#cars {
  border: 0 none;
}

<!DOCTYPE html>
<html>
<body>


<select id="cars" name="cars" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">



</body>
</html>

【讨论】：