I have a custom select (dropbox), in which there is a search field in the list, this select with jquery was downloaded (I did not do that), well, I had to position one over the other for my purpose, the problem is that a select overlaps the other when active, as if it were transparent, I have already changed the position property, z-index, background color and nothing, I leave a print of the problem, does anyone suggest anything? I do not have much intimacy with frontend (css)
First image with the first select selected (without any below) second image with a select on top of others, look at the list of options
below the css snippet:
/* @group Results */
.chosen-container .chosen-results {
color: #444;
overflow-x: hidden;
overflow-y: auto;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display:none;
margin: 0;
padding: 1px 1px;
list-style: none;
text-align:left;
z-index: 999999 !important
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
background-color: #3875d7;
color: #fff;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
/* @end */