HTML下拉框添加阴影效果方法

<div class="select-wrapper">
  &lt;select&gt;
    <option>选项一</option>
    <option>选项二</option>
  &lt;/select&gt;
</div>

对应 CSS：

.select-wrapper {
  display: inline-block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  border-radius: 4px;
  overflow: hidden; /* 防止阴影被裁 */
}
.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #ccc;
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
}

注意点：

• 必须设 overflow: hidden 在 wrapper 上，否则阴影可能溢出
• appearance: none 是关键，否则下拉箭头仍走系统渲染，干扰阴影一致性
• 若需支持旧版 Safari（-webkit-appearance: none
• 移动端 iOS 仍可能保留原生弹出层，但输入框区域阴影可正常显示

用 JS 模拟下拉时怎么加阴影？

如果用 div + ul/li 完全模拟下拉（如配合 react-select 或 Choices.js），阴影就完全可控——直接给外层容器加 box-shadow 即可，无兼容性问题。

例如使用 Choices.js：

<select id="choices-single-default">
  <option value="1">苹果</option>
  <option value="2">香蕉</option>
&lt;/select&gt;

初始化后，它会生成一个带 class="choices" 的外层

.choices {
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  border-radius: 6px;
}

DeepSeek市场调研教程：分析趋势与竞品方法

上一篇

DeepSeek市场调研教程：分析趋势与竞品方法

下一篇

WeakRef 与 FinalizationRegistry 资源管理技巧