Why is the dropdown styling different when the form is viewed from iOS?

  • Profile Image
    avijfr
    Asked on May 23, 2017 at 03:18 PM

    Hi Support Team,

    I am confused as to why the following is happening.

    When on desktop my "select State" drop down field is formatted like the rest of my form.

    When on mobile, it changes formatting completely.

    See the screen shots below:

    Desktop: http://imgur.com/b8p93Mk

    Mobile: http://imgur.com/E9886XW

     

    Thanks

  • Profile Image
    Jim_R
    Answered on May 23, 2017 at 04:43 PM

    Hi there too 😊 What you're describing is not a mobile responsiveness issue per se - It's more about the platform-native styling based on the users' operating system's theme (in your screenshot, it's Safari on iOS).

    I'm not sure if this is something that you should tinker around with since users are well accustomed to using the native controls they normally see on the browser/OS they're using but I will try to come up with the CSS Codes that would make the dropdown look the same way as it is on desktop. Allow me some time to work on it and I'll get back to you on this thread with the results.

  • Profile Image
    Jim_R
    Answered on May 23, 2017 at 04:56 PM

    All right, can you try the following CSS codes and see if they will help:

    @media screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {

      #cid_25 {

        width: 100% !important;

      }

      .form-dropdown {

     background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;

     -moz-appearance: none; 

     -webkit-appearance: none; 

     appearance: none;

     width: 100% !important;

        background-color: white;

        border-radius: 0 !important;

        box-shadow: none !important;

      }

    }

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

    Result:

  • Profile Image
    avijfr
    Answered on May 24, 2017 at 11:18 AM

    THANK YOU!!!!

    JOTFORM SUPPORT IS THE BEST!