Question

我无法想象这一个。我在ios7上使用phonegap。我有一个pagecontainer，我在其中放置页面元素。我有选择元素使用默认的ios7选择列表的东西。选择获得黑色背景 - 因此文本无法读取。如果我从我的css中删除glb_pagecontainer和页面，则选择列表会变得透明。所以问题似乎与glb_pagecontainer结合页面？

#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

当<select>元素太靠近表单底部时会发生这种情况。在这种情况下，浏览器控件会过度滚动以保持HTML控件在上半部分可见，同时在底部显示选择微调器。在自动生成的Phonegap项目中，默认的过卷背景为黑色，与新的iOS 7模糊背景叠加相结合，使文本难以阅读。

一种解决方案可能是重新排列您的表单，以便选择不在底部，以及在CSS中选择浅色背景以在叠加层出现时获得良好的对比度。

对我而言，上述情况是不可能的，我只在表格上有一些选择，没有别的。如果您使用Phonegap CLI创建了项目，请打开以下文件：

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

并注释掉或删除以下行：

theWebView.backgroundColor = [UIColor blackColor];

这是负责黑色过度滚动背景的原因。通过删除该行，它将重置为默认的中浅灰色。

Answer 2

有一个非常好的插件，让你设置Web视图的背景颜色 - 甚至可以在运行时动态设置。

它解决了我的问题。

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

Answer 3

如果从select元素中删除以下内容会怎样？

text-indent: 92px;

Answer 4

如评论中OP所述，添加

的值

高度=设备高度

对于meta视口，修复此问题用于iOS 7.0.x，它已修复为7.1。

Answer 5

将这行代码放在css

中

html { -webkit-tap-highlight-color: transparent;}

phonegap ios7选择下拉获取黑色背景

5 个答案: