Dropdown colors are different in different browsers

  • Profile Image
    Enlighted_INC
    Asked on June 19, 2020 at 12:23 PM

    Hello

    How can I adjust the dropdown colors? Every browser shows them differently.

    We would like to change the colors to be that of Microsoft Edge on Windows (1st image). Which is gray and white. See all images below.

    White/Blue

    Brown/Orange

    White/Orange

    White/Gray *****This is what we want*****

     

    1592583404Edge on Windows.png

     

    1592583476chrome on Windows.png

    1592583508Firefox on windows.png



    1592583535Edge on Mac.png

     

    1592583564Chrome on Mac.png

     

    1592583586Firefox on Mac.png



    1592583606Safari on Mac.png

  • Profile Image
    Basil_A
    Answered on June 19, 2020 at 01:01 PM

    Hi,

    Unfortunately, It is not possible to change the hover color of the select option in the drop-down as it is rendered by Operating System. The behavior will always be different for different browsers. You can take a look at this article for more information:

    https://www.456bereastreet.com/archive/200409/styling_form_controls/

    I believe the background colour of the dropdown field can be changed consistently across browsers. You will need to inject the following CSS code:

    .form-dropdown{

        background-color: #FFFFFF !important;


    }

    Here is a guide on how to inject custom CSS into your form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Let us know if you require any further assistance.