css - 選択オプションを使用したテキストの中央揃え

Question

選択オプションでテキストを垂直方向に揃える方法。

リンク: http://mink7.com/projects/test/dashboard.html

Answer 1

この例 fiddleのようにラベルを使用します。マークアップ:

<form action="">
    <label for="startDate">Start Date:</label>
    <select id="startDate">
        <option value="Mar 04">Mar 04</option>
    </select>
    <label for="endDate">End Date:</label>
    <select id="endDate">
        <option value="Aug 04">Aug 04</option>
    </select>
</form>

これが機能しない場合は、継承されたスタイルが干渉しているため、このデモvertical-align: middleに示すように設定してみてください。

Answer 2

IEとChromeでは、選択タグのテキストはFirefoxではなく、自動的に中央に配置されます。IEとChromeを損なうことなく、Firefoxのみをパディングでターゲットにするには：FFにブラウザ固有のハックを使用し、パディングトップを付けます。

@-moz-document url-prefix() {
        .select select{
                 padding-top: 8px;
                 }
        }