Firefox, проблемы с отображением на форме ввода HTML/CSS

Question

Я не знаю, почему, но при использовании firefox при вводе ввода текст скрыт (но когда я выхожу из ввода, текст отображается), на google хром работает хорошо, я пытаюсь изменить 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 имеет г-индекс 1000 Я пытаюсь переключить его в 10 он все еще имеет такое же поведение на firefox.

Answer 1

Вы имеете большое количество padding которое вызывает проблемы и, кроме того, который вы используете height из 26px и, следовательно, текст скрывает

padding: 20px 40px 18px 8px; 

Demo

Вы можете удалить красную границу позже (I «ве хранится для целей тестирования)

Demo

Несколько советов по рефакторинга кода

• Этот запас: 0px 0 0px 0; можно просто записать как margin: 0;
• Нет необходимости в какой-либо тени в вашем коде, как они установлены в 0
• z-index не требуется
• line-height не требуется (если вы не используете фиксированную высоту)
• top, left не требуется