Forum Discussion

skylinegtr's avatar
skylinegtr
Mentor
10 years ago

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.

 

  • VarunGrazitti's avatar
    VarunGrazitti
    10 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

Sort By
  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    10 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