Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options.
Select CSS:
select {
background-color: rgba(0,0,0,0.25) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
color: #fff !important;
min-height: 30px !important;
padding-right: 6px !important;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s !important;
}
Options CSS:
select option {
width: 100%;
background-color: rgba(0,0,0,0.35) !important;
-webkit-appearance: none;
-moz-appearance: none;
}
Recreated with ul and li:
ul.dropdown{
display: block;
position: relative;
width: 100%;
height: 34px;
font-size: 14px;
line-height: 1.42857143;
background-color: rgba(0,0,0,0.25) !important;
border: 1px solid rgba(255,255,255,0.25) !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
ul.dropdown ul {
width: 100%;
background-color: rgba(0,0,0,0.35) !important;
visibility: hidden;
position: absolute;
list-style-type: none;
top: 100%;
left: 0;
padding: 0px;
}
Desired look for select/option:
Questions:
1) Is there a default background setting in Bootstrap or Chrome that affects RGBA styling, and how do I override it to match the ul/li design?
2) Are there any jquery plugins to mimic the select/option functionality on ul/li while avoiding interference from Bootstrap's styles?
Most solutions I've found use select/option with limited styling, and I'm concerned about Bootstrap's impact.
Thank you for your assistance.