我不知道为什么,但是在 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 上仍然具有相同的行为。
最佳答案
你有大量的 padding
导致了这个问题,而且你使用的 height
为 26px
,因此文本隐藏了
padding: 20px 40px 18px 8px;
你可以稍后删除红色边框(我保留用于测试目的)
重构代码的几个小技巧
- This margin:
0px 0 0px 0;
可以简单写成margin: 0;
- 代码中不需要任何阴影,因为它们设置为
0
z-index
不是必需的line-height
不是必需的(如果您没有使用任何固定高度)top
,left
不需要
关于html - Firefox,在输入表单 HTML/CSS 上显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16351470/