What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Change the appearance of drop down to match across all browsers.

    Asked by HeatherWalk on November 06, 2016 at 07:27 PM

    Not published on site as form appears from a popup.

     

     

     

    appearance all drop JotForm uploads jpg site
  • Profile Image
    JotForm Support

    Answered by Chriistian on November 06, 2016 at 10:12 PM

    Please inject the custom CSS code below to change the appearance of the dropdown:

    li[data-type="control_dropdown"] div {

        border : 1px solid #e3e3e3;

        color:#b3cddc;

        overflow : hidden;

        height : 25px;

        width : 180px;

        position : relative;

        display : block;

    }

     

    select {

        height : 40px;

        padding-bottom : 15px;

        border : 0;

        outline : none;

        font-size : 12px;

        width : 180px;

        -webkit-appearance : none;

        -moz-appearance : none;

        appearance : none;

        overflow:hidden!important;

    }

     

    li[data-type="control_dropdown"] div:after {

        content : "▼";

        padding : 2px 1px;

        position : absolute;

        right : 1px;

        top : 2px;

        z-index : 1;

        text-align : center;

        width : 20%;

        height : 100%;

        pointer-events : none;

        box-sizing : border-box;

        background-color: #333;

    }

    Here's how it should look in IE:

    If you need further assistance, please let us know.
    Regards.

  • Profile Image

    Answered by HeatherWalk on November 07, 2016 at 12:06 AM

    Thank you for a tremendous effort. I did change one color to rid the outline. Well done!

    It did however create one glitch. Of the 3 boxes the top one became smaller in width and therefor when answered the answer itself becomes cut off. From the image above the complete answer is 9004 sw 137 street building 5. Reference my image at top of page to see what I explained. It would be ok, if possible to make all 3 boxes longer if that's an easy fix. And finally I removed the code until a more viable solution is found.

  • Profile Image
    JotForm Support

    Answered by Chriistian on November 07, 2016 at 01:40 AM

    I've added a custom code for the first dropdown to extend its width so that the whole text will be visible. Please inject the updated custom css code below:

    li[data-type="control_dropdown"] div {

        color:#b3cddc;

        overflow : hidden;

        height : 25px;

        width : 180px;

        position : relative;

        display : block;

    }

    select {

       font-size:  0.857em;

        height : 40px;

        padding-bottom : 17px;

        padding-left: 10px;

        border : 0;

        outline : none;

        font-size : 12px;

        width : 180px;

        -webkit-appearance : none;

        -moz-appearance : none;

        appearance : none;

        overflow:hidden!important;

    }

    li[data-type="control_dropdown"] div:after {

        content : "▼";

        padding : 5px 1px;

        position : absolute;

        right : 1px;

        top : 0px;

        z-index : 1;

        text-align : center;

        width : 20%;

        height : 100%;

        pointer-events : none;

        box-sizing : border-box;

        background-color: #333;

    }

    #cid_6{

        width: 200px!important;

    }

    #cid_6 select{

        width: 200px!important;

    }

    Please let us know if you need further assistance.
    Regards.

     

  • Profile Image

    Answered by HeatherWalk on November 07, 2016 at 08:28 AM

    Your solution works great and by following your example the remaining boxes were extended to have all 3 boxes look uniform. Thanks for your help.