<option value="? string:car ?"></option> visible in firefox but not in chrome.

[aballoonflies]

The option shows a grey color box that I have no way to remove under firefox. Same code works perfectly fine in chrome.

Jade code as below. styling is done on div. div select#search(ng-model='searchType') option cars option users option images

attached is a picture of how it looks in firefox.

Chrome looks perfect:

[paulstraw]

I'll need to see your custom CSS in order to help with this.

[paulstraw]

I'll need to see your custom CSS in order to help with this.

[aballoonflies]

Hi Paul, here's all my code attempt to custom fancyselect. Thanks!

/* modify FancySelect */
div.fancy-select, div.fancy-select div.trigger, div.fancy-select div.trigger:after,
div.fancy-select div.trigger.open, div.fancy-select select:focus + div.trigger {
    border:none;
    background: none;
    box-shadow: none;
    color: #FFFFFF;
}

div.fancy-select {
    display: inline-block;
    z-index: 999;
    font-family: nexalight;
}
.fancy-select:before, .fancy-select:after {
    content: '';
    position: absolute;
    height: 0px;
    width: 0px;
    top: 0;
    z-index: 0;
}
.fancy-select:before {
    left: -35px;
    border-bottom: 35px solid #464646;
    border-left: 35px solid transparent;
}
.fancy-select:after {
    right: -35px;
    border-top: 35px solid #464646;
    border-right: 35px solid transparent;  
}
div.fancy-select div.trigger {
    width: 60px;
    border: none;
    color: white;
}
div.fancy-select div.trigger:after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 9px solid transparent;
    border-top-color: #FFFFFF;
    top: 11px;
    right: 0px;
}
div.fancy-select div.trigger.open:after {
    border-top-color: #fbc72e;
    color: #FFFFFF;
}
div.fancy-select ul.options li {
    color: #FFFFFF;
}
div.fancy-select ul.options li.selected {
    background: none;
    color: #FFFFFF;
}

div.fancy-select ul.options li.hover {
    color:#fbc72e;
}

div.fancy-select ul.options {
    left: -43px;
    min-width: 120px;
    border-radius: 0px;
    background: rgba(73,73,73,0.6);
    border:none;
    box-shadow: none;
    -webkit-filter: drop-shadow(0px 1px 1px black);
    filter: drop-shadow(0px 1px 1px black);
}
div.fancy-select ul.options.open {
    top: 40px;
}

[aballoonflies]

hopefully the code helps..

[paulstraw]

I'm not seeing anything offhand. If you comment out your custom CSS, do you still see the issue?

[aballoonflies]

below is the screenshot when I comment out all my css, leaving the default.

To make things easier below is the jade code I use. .searchselect >select#search(ng-model='searchType') >>option cars >>option users >>option images (github cannot do indentation, so > is one indent.)

for wrapper .searchselect I have below css .searchselect { background: #464646; height: 35px; float: left; }

I notice if I take away my custom CSS (in the second post), then remove float:left I can get the grey bar to go away. I am not so sure if that's a problem on firefox end?