html - 在选择中垂直居中文本

Question

图片

问题

有什么办法可以将“温哥华，不列颠哥伦比亚省”文本向下移动一点，以便与“城市”和“改变”更好地对齐？

我知道输入元素在浏览器中的样式很挑剔。它不一定是完美的，但如果它至少可以在某些浏览器中工作，那就太好了。

小提琴

Answer 1

由于以下几个原因，通常不建议自定义浏览器对某些表单元素的默认呈现——尤其是下拉选择列表：

• 您的自定义选项自然是有限的
• 让表单元素看起来像你想要的样子是非常困难的——正如你所指出的，它们很挑剔
• 即使您可以在一个浏览器中获得您想要的输入方式，也几乎不可能跨浏览器进行（我意识到您说这不是问题，但仍然值得了解）
• 从可用性的角度来看，自定义表单元素的默认呈现几乎总是会在一定程度上降低表单的可用性

现在，说了这么多，如果您想更好地控制表单元素的视觉样式，我建议您使用 jQuery 插件。通常，这些工作通过隐藏表单元素并用易于定制的 CSS 替换它们 - 通常是常规的 ol' 无序列表 - 然后将用户与无序列表的交互发送到隐藏的表单。这是您可以查看以开始使用的一个。

Answer 2

我会调整字体大小或高度来解决对齐问题：

#city_picker {
    height: 26px;
    font: 19px Arial,Helvetica,sans-serif;
}

这将使文本与选择框的大小大致相同，并强制它显示为对齐。否则，跨浏览器调整选项元素的样式似乎相当困难。