2

我有一个选择字段，无论我做什么，我都无法让文本停止粘在框的顶部。

这是它的外观示例：

在此处输入图像描述

如果我使用padding-top它，它也会按下箭头按钮，这是我不想要的。我也试过line-height没有效果。

这是相关的CSS：

#header .nav .misc .search .search_holder .cats select {
    width: 111px;
    height: 29px;
    border-top: 1px solid #97ad00;
    border-bottom: 1px solid #97ad00;
    border-left: none;
    border-right: none;
    padding-left: 8px;
    font-family: Roboto, Arial;
    font-size: 14px;
    background: url('../images/search-cats-bg.png') 0 0 repeat-x;
    color: #b2b2b2;
}

#header .nav .misc .search .search_holder .cats select option {
    padding-top: 5px;
}

#header .nav .misc .search .search_holder .cats select option.last {
    padding-bottom: 5px;
}

编辑：添加了 HTML。

HTML：

<div class="cats">
    <select id="search_cats" class="search_cats" name="cat">
        <option value="all">All Categories</option>
        <option value="sports">Sports Cards</option>
        <option value="gaming">Gaming Cards</option>
        <option value="non-sport">Non-Sport Cards</option>
        <option value="supplies" class="last">Supplies & Storage</option>
    </select>
</div>

为什么会这样，我该如何解决？

编辑：似乎无法真正修复，发现了这个问题：

我想在选择框中垂直对齐文本

如果您查看“Shelly Skeens”的答案，那么您会发现 FF 决定将内置设置line-height为normal !important，因此它不能被覆盖。

4

2 回答 2

0

在谷歌浏览器和谷歌开发者工具上运行良好回答选择框问题

于 2012-10-17T15:01:41.233 回答
0

尝试添加

.cats * { line-height: 16px; }
于 2012-10-17T12:01:21.570 回答