CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user247326
user247326

Reputation: 151

Bootstrap <option> rgba color

I'm growing fustrated with trying to figure this out and I'm hoping someone can help me out with this. Currently, I have a form that is using bootstrap. I am able to apply rgba color for my select tag but I'm unable to do so with option.

Here is what my select CSS looks like:

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;

}

And here is what it looks like:

enter image description here

Now, here is what I currently have for the options tag:

Options CSS:

select option {
            width: 100%;
    background-color: rgba(0,0,0,0.35) !important;

          -webkit-appearance: none;            /*Removes default chrome and safari style*/
      -moz-appearance: none;             /* Removes Default Firefox style*/
}

And here is what it looks like:

enter image description here

I recreated the same thing using 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;
}

I want the select/option to look like this:

enter image description here

Questions:

1) is there a default background setting in Bootstrap or Chrome that when RGBA is applied, it goes over it and if so, how do I remove it to look like the ul/li design?

2) is there a jquery plugin that I can apply to the ul/li to simulate the select/option functionality?

All that I have found use select/option and have limited styling plus I fear Bootstrap's styling might interfere

Thanks for your help.

Upvotes: 4

Views: 166

Answers (1)

DinoMyte
DinoMyte

Reputation: 8868

Bootstrap applies .dropdown-menu class to the select converted to ul . So You can simply override that class.

ul.dropdown-menu
{
  background-color: brown;
}

ul.dropdown-menu li a:hover
{
 background-color: orange; 
}

Example : http://jsfiddle.net/dJDHd/1365/

Upvotes: 1

Related Questions