AnsweredAssumed Answered

Issue with formatting drop down menus (choice control)

Question asked by timsp on Jul 12, 2016
Latest reply on Jul 19, 2016 by philipplucas

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. 

Choice_Control.png

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

 

.nf-filler-control-inner{

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

}

.nf-filler-control-border{

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

}

.dropDown{

width: 10%;

font-size: 1.00rem;

color: #333;

top: .5rem;

padding: 0 0 .125rem;

border-bottom: none;

background: url(http://d2a072wq521u33.cloudfront.net/kineticimages/images/dropdown-arrow.png) 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!

 

Thanks,

Tim

Outcomes