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

Not published on site as form appears from a popup.

 

 

 

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.

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.

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.

 

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.