0

我不知道为什么，但是在 Firefox 上，当我输入输入时，文本被隐藏（但是当我点击输入时，文本被显示），在 google chrome 上效果很好，我尝试更改 z-index 但是它不会改变任何东西。

这是我的 HTML

<div id="searchBar" class="{% if query %}cancelable{% endif %}">
    <input class="searchInput" type="text" autocomplete="off"
        value="{{ query|default_if_none('')|escape }}"
        name="query" id="keywords"/>
    <input type="submit" value="" name="search" class="searchBtn" style="display: none;"/>
</div>

这是我的 CSS

#searchBar input.searchInput {
    z-index: 99;
    font-size: 22px;
    height: 26px;
    line-height: 26px;
    font-weight: 300;
    background: #FFF;
    border: 0px;
    color: #484848;
    font-family: Arial;
    width: 100%;
    margin: 8px 0 6px 0;
    padding: 0 80px 0 8px;
    top: 0;
    left: 0;
    -webkit-box-shadow: 0 0 0 #929292;
    -moz-box-shadow: 0 0 0 #929292;
    box-shadow: 0 0 0 #929292;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#searchBar input.searchInput:focus {
    margin: 0px 0 0px 0;
    padding: 20px 40px 18px 8px;
    border: solid 1px rgba(82, 168, 236, 0.8);
    -webkit-box-shadow: 0 0 0 rgba(82, 168, 236, 0.8);
    -moz-box-shadow: 0 0 0 rgba(82, 168, 236, 0.8);
    box-shadow: 0 0 0 rgba(82, 168, 236, 0.8);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-transition:border linear .2s, box-shadow linear .2s;
    -moz-transition:border linear .2s, box-shadow linear .2s;
    -o-transition:border linear .2s, box-shadow linear .2s;
    transition:border linear .2s, box-shadow
}

PS：#searchBar 的 z-index 为 1000 我尝试将其切换到 10 它在 Firefox 上仍然具有相同的行为。

4

1 回答 1

1

你有很多padding是导致问题的原因，而且你正在使用height的26px，因此文本隐藏

padding: 20px 40px 18px 8px;

演示

您可以稍后删除红色边框（我保留用于测试目的）

演示

关于重构代码的一些技巧

  • 这个边距：0px 0 0px 0;可以简单地写成margin: 0;
  • 您的代码中不需要任何阴影，因为它们设置为0
  • z-index不需要
  • line-height不需要（如果您没有使用任何固定高度）
  • top,left不需要
于 2013-05-03T04:25:54.887 回答