CODEWITHSUNDEEP
htmlcssformsfirefox
Nicolas HENAUX
Nicolas HENAUX

Reputation: 1686

Firefox, display issues on a input form HTML/CSS

I don't know why but on firefox when I type in a input the text is hidden (but when I click out of the input the text is display), on google chrome it works well, I try to change the z-index but it doesn't change anything.

This is my 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>

This is my 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 has a z-index of 1000 I try to switch it to 10 it still has the same behavior on firefox.

Upvotes: 0

Views: 796

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

You've large amount of padding which is causing the issue and moreover you are using height of 26px and hence the text hides

padding: 20px 40px 18px 8px;

Demo

You can remove the red border later(I've kept for test purposes)

Demo

Few tips on refactoring code

  • This margin: 0px 0 0px 0; can be simply written as margin: 0;
  • No need of any shadow in your code as they are set to 0
  • z-index is not required
  • line-height is not required(If you aren't using any fixed height)
  • top, left not required

Upvotes: 1

Related Questions