Showing results for 
Search instead for 
Did you mean: 
Not applicable

Issue with formatting drop down menus (choice control)

Hi all,

I have been trying to format a drop down menu on one of my forms, but am having some issues.  It appears that I can easily edit the <select> tag but, in IE at least, it seems that there is something laid over that html element.  So, anytime I try to change the background it is underneath that control. 


Here is my custom CSS that I have inserted into the form.


background: rgba(255, 255, 255, .01)!important;



background: rgba(255, 255, 255, .01)!important;



width: 10%;

font-size: 1.00rem;

color: #333;

top: .5rem;

padding: 0 0 .125rem;

border-bottom: none;

background: url( right center !important;

background-position: 0% , 50%;


select {

width: 100%;

padding: 0 .563rem;

margin: 0;

box-sizing: border-box;

border-radius: 3px;

border-bottom: 1px solid #ccc;

border-top: 1px solid #999;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

color: #333;   

background: rgba(255, 255, 255, .01)!important;

outline: 0;

display: inline-block;

height: 2.45rem;

appearance: none;

-webkit-appearance: none;

-moz-appearance: none;

cursor: pointer;


Note: The image that I am using for the background is what I will use for the arrow.  The default arrow is also not going away.  I will remove the repeating pattern after I get that to disappear.  I left it repeating in order to better demonstrate this issue.

Any help or input would be greatly appreciated!



0 Kudos
1 Reply
Automation Master
Automation Master

Re: Issue with formatting drop down menus (choice control)

Hi Timothy,

not sure if I understand your issue but if it's about overlaying elements maybe the z-index property can help you. This property is used to decide which elements are shown on top of or behind other elements.



0 Kudos