Search code examples
jqueryhtmlcsscordovawindows-phone

Issue with select tag on phonegap/cordova on windows phone device

I'm developing an mobile hybrid app on phonegap/cordova and experience an issue that i cant resolve on windows phone.

So I'm creating an select tag as you can see

<select>
        <option>item 1</option>
        <option>item 2</option>
        <option>item 3</option> 
</select>

and I'm using some css from a framework called Chocolate-Chip UI

select {
background-color: transparent;
border: solid 2px #000000;
color: #000000;
height: 30px;
padding-left: 5px;}

giving me the result that I've expected. You can see the result bellow

https://i.sstatic.net/uRaf9.jpg

The problem seems to appear when i select an item, since my background color its white (and i want it that way), my font color comes white also which results on a full white select. You can see the result below.

https://i.sstatic.net/rYi2O.jpg

When i press out of the of the select tag it becomes all normal again.

So my question is, Can i manipulate the color of the font on item selected via css? I Know i can manipulate the background on select:checked or select:focus color but the color of the font doesnt seem to work

Do you have any suggestions that might help?

Solution

  • I've successfully solve my problem. It seems that IE11 has some expecific directives on focus event.

    So the code i've done its like this

    /*The event on select*/
select:focus::-ms-value{
background:#FFFFFF;
color:#666666;}

    This should solve the problem