safari 和 chrome 中 FORM INPUT FIELDS 的垂直对齐

Posted 2023-04-18

【中文标题】safari 和 chrome 中 FORM INPUT FIELDS 的垂直对齐

【英文标题】：vertical alignment for FORM INPUT FIELDS in safari and chrome

【发布时间】：2011-03-22 07:24:52

【问题描述】：

我有一个高度为 60 像素的选择框。当我用户单击一个选项时，我希望该选项文本出现在选择框的底部底部......但是 safari 和 chrome 会自动垂直对齐中间的文本。

我尝试增加 line-height、padding-top、margin-top...但这些不适用于 safari/chrome。

如果这种类型的样式在 safari/chrome 中“不可能”，请提供帮助。也请告诉我。提前致谢！

【问题讨论】：

我相信这是不可能的，除非你使用 javascript 选择框样式。

你有什么可以在其他浏览器中运行的东西可以发布吗？

【参考方案1】：

很遗憾，您无法为 Safari 和 Chrome 生成的选择元素设置样式。您正在处理的内容已被创造为 Shadow DOM：http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

本质上，浏览器会创建元素，所有选择框都可以在呈现页面时发挥作用，但这些元素不能通过 CSS 设置样式。

如果您希望对选择框进行一些繁重的样式设置，我建议您使用 Chosen:http://harvesthq.github.com/chosen/ 之类的工具。它使用 javascript 将元素放置在选择框的顶部，替换其功能并允许您使用 CSS 设置样式。