Skip to content
This repository has been archived by the owner on Nov 27, 2018. It is now read-only.

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

Open
aballoonflies opened this issue Mar 8, 2014 · 6 comments

Comments

@aballoonflies
Copy link

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.

screen shot 2014-03-09 at 2 32 25 am
screen shot 2014-03-09 at 2 32 41 am

Chrome looks perfect:

screen shot 2014-03-09 at 2 35 58 am

@paulstraw
Copy link
Owner

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

1 similar comment
@paulstraw
Copy link
Owner

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

@aballoonflies
Copy link
Author

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
Copy link
Author

hopefully the code helps..

@paulstraw
Copy link
Owner

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

@aballoonflies
Copy link
Author

below is the screenshot when I comment out all my css, leaving the default.
screen shot 2014-03-10 at 3 01 49 pm

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants