2024-08-30 CSS: 调整 select 默认展开符
内容提要
浏览器默认位置调整，使select前后padding一致。使用CSS实现期待效果，移除浏览器默认style，使用background-image模拟展开符号。还可以从daisyUI复制CSS样式。推荐移除input[type=number]的默认风格。
延伸解读
为何需要自定义 select 展开符
浏览器默认的 select 展开符位置固定，常导致左右内边距不一致，影响视觉平衡。文章指出 CSS 没有开箱即用的方法直接调整图标位置，因此需要移除默认样式并自行模拟。这提醒开发者，在追求设计一致性时，有时需放弃原生控件的外观，转而用 CSS 重建，但需注意保持可访问性和交互反馈。
两种实现路径：SVG 与渐变
文章提供了两种模拟展开符的方案：一是使用内联 SVG 作为 background-image，通过 background-position 精确控制位置；二是从 daisyUI 复制纯 CSS 方案，利用两个线性渐变绘制箭头。前者依赖 SVG 数据 URI，后者完全用 CSS 渐变，各有适用场景。开发者可根据项目技术栈和浏览器支持情况选择。
注意其他表单控件的默认样式
除了 select，文章还提醒 input[type=number] 的数字调节按钮默认样式不美观，推荐移除。这反映出浏览器默认表单控件在不同平台上外观差异大，可能破坏设计统一性。在自定义表单时，应全面检查各类输入控件的默认表现，但移除样式后需确保功能不受影响，例如数字输入仍可正常调节。
Q&A
如何使用CSS调整select的默认展开符号？
可以通过设置appearance: none;来移除浏览器默认样式，并使用background-image模拟展开符号。
推荐的CSS代码是什么？
推荐的CSS代码包括：select { appearance: none; background-image: url(...); background-position: right 0.5rem center; }。
为什么要移除input[type=number]的默认风格？
因为input[type=number]的默认风格样式不美观，建议移除以改善视觉效果。
如何从daisyUI复制CSS样式？
可以直接复制daisyUI中定义的CSS样式，应用于自己的项目中。
如何确保select前后padding一致？
通过调整CSS样式中的padding属性，可以确保select前后padding一致。
使用tailwindUI的代码有什么好处？
使用tailwindUI的代码可以快速实现美观的样式，减少自定义CSS的工作量。
