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

  • Profile Image
    HeatherWalk
    Asked on November 06, 2016 at 07:27 PM

    Not published on site as form appears from a popup.

     

     

     

  • Profile Image
    Chriistian
    Answered 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
    HeatherWalk
    Answered 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
    Chriistian
    Answered 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
    HeatherWalk
    Answered 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.