phonegap ios7 select dropdown gets black background

Question

I cant figure this one out. I use phonegap on an ios7. I have a pagecontainer in which I put page elements. I have select element which uses the default ios7 select list thing. The select gets a black background - so the text is impossible to read. If I remove the glb_pagecontainer and page from my css, the select list gets transparent as it should. so the problem seems to be with the glb_pagecontainer in combination with the page?

#glb_pagecontainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.page {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

<div id="glb_pagecontainer">
    <div class="page" id="pageid">
        <div class="row row1" style="margin-top:50px;">
            <section class="col">
                <div class="input">
                    <select id="theid" class="inputpicker" style="text-indent: 92px;">
                        <option>one option</option>
                    </select>
                </div>
            </section>
        </div>
    </div><!-- End page -->
</div><!-- End glb_pagecontainer -->

Answer 1

It happens when the <select> element is too close to the bottom of the form. In that case the browser control overscrolls to keep the HTML control visible in the top half, while showing the selection spinner on the bottom. In the auto-generated Phonegap project, the default overscroll background is black, which combined with the new iOS 7 blurred background overlay, makes the text very hard to read.

One solution could be re-arranging your form so the select is not on the bottom, as well as picking a light background in your CSS for good contrast when the overlay appears.

For me the above was not possible, I only had a few selects on the form, nothing else. If you have created your project using the Phonegap CLI, open the file at:

[project-folder]/platforms/ios/[project-name]/Classes/MainViewController.m

and comment out or delete the following line:

theWebView.backgroundColor = [UIColor blackColor];

This is what responsible for the black overscroll background. By removing that line, it resets back to a default medium-light grey.

Answer 2

There is a pretty sweet Plugin, that let's you set the background-color of the Web-View - even dynamically during runtime.

It solved the problem for me.

https://github.com/EddyVerbruggen/iOSWebViewColor-PhoneGap-Plugin