Forum Discussion

skylinegtr's avatar
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.

 

  • 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

  • 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