Forum Discussion

skylinegtr's avatar
skylinegtr
Mentor
11 years ago
Solved

Search Bar drop down arrow looks different with Firefox

Hello!

 

 The search bar drop down arrow looks different on Chrome & Firefox.

 

The drop down arrow looks like this in Chrome.

 

Chrome.png

The drop down arrow looks like this in Firefox.

 

FireFox.png

I know that is a Firefox issue. I've tried changing the CSS and adding this " -moz-appearance: none" but the arrow disappeared. Has anyone run into this issue before? Any tips on how to fix this?

 

Any help will be greatly appreciated

 

Thank you.

 

Views
Sign in to react to this post
  • VarunGrazitti's avatar
    VarunGrazitti
    11 years ago

    skylinegtr - We have added a fix for this in one of our communities using CSS. searchDrop.png is the image which we added, I am attaching that as well.

     

    .lia-search-form-granularity.search-granularity {
    background: #ffffff url("/html/assets/searchDrop.png") no-repeat scroll 135px center;
    border-bottom-style: none;
    border-left: 1px solid #49a1e0 !important;
    border-right-style: none;
    border-top-style: none;
    color: #185fa4;
    float: left;
    font-family: "open_sanssemibold",sans-serif;
    font-size: 15px;
    height: 42px;
    padding-left: 10px;
    width: 175px;
}

    You might need to alter the CSS according to your needs, but this should fix this globally. I hope this helps.


    searchDrop.png

2 Replies

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    11 years ago

    skylinegtr - We have added a fix for this in one of our communities using CSS. searchDrop.png is the image which we added, I am attaching that as well.

     

    .lia-search-form-granularity.search-granularity {
    background: #ffffff url("/html/assets/searchDrop.png") no-repeat scroll 135px center;
    border-bottom-style: none;
    border-left: 1px solid #49a1e0 !important;
    border-right-style: none;
    border-top-style: none;
    color: #185fa4;
    float: left;
    font-family: "open_sanssemibold",sans-serif;
    font-size: 15px;
    height: 42px;
    padding-left: 10px;
    width: 175px;
}

    You might need to alter the CSS according to your needs, but this should fix this globally. I hope this helps.


    searchDrop.png
    Sign in to react to this post