禁用Android浏览器的input重叠?

我有一个文本input的网页。 Android浏览器(至less在Android 2.3.4上是我现在所拥有的)似乎覆盖了自己对焦点页面上的input的控制。

问题是重叠的控件是一个白色的矩形,它看起来很丑。 有没有办法禁用它,或者以某种方式来devise它?

更新:

这里是Android模拟器的一个例子:

在这里输入图像说明

圆angular和背景都丢失了。 在实际的设备上,我甚至没有看到控制边界。

我应该提到我正在使用jQuery Mobile。 我的testing设备是HTC Evo 4G。

相关问题:

input有不同的风格

如果在HTC设备上突出显示,WebView中的input元素始终具有相同的样式

最后,我解决了Android 2.3设备的这个问题。

不可能真正删除叠加层,但可以将叠加层移到视口之外。

覆盖层尝试将自己定位到与input字段相同的位置。 它复制您分配的宽度和位置偏移量

 position:relative 

 top:-10000px 

但叠加层不会复制通过赋值的位置偏移量

 -webkit-transform: translate3d() 

这导致与像iScroll的JS库的几个问题。

但这也有助于我们隐藏覆盖:

 input[type="password"], input[type="text"]{ position:relative; top:-10000px; -webkit-transform: translate3d(0, 10000px, 0); } 

您将input字段放置在视口外部。 叠加层位于其旁边。 现在使用translate3d()将它移动到旧的位置。

我们已经在我们的移动networking框架“qooxdoo Mobile”中使用这个解决scheme: http : //demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

以下代码将删除轻按高亮 – [Android 4.0.3]

 input{ -webkit-user-modify: read-write-plaintext-only; -webkit-tap-highlight-color:#3072af; } 

不知道这是一个工作的解决scheme和答案,但我的input开始在Android上发挥作用,在评论这些,这一切都创造了我的Android(HTC2.3)文本input和select浩劫

 /* really bad */ -webkit-backface-visibility: hidden; /* your normal bad */ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); 

如果你想风格默认input,我使用这些:

 /* native placeholder styling */ ::-webkit-input-placeholder { color:#555555; } :-moz-placeholder { color:#555555; } .inField label { color:#555555; cursor: text; } 

在评论第一个webkit之后,Android对我来说工作正常。 尽pipe如此,我还是压倒了其他许多东西。

另外看看下面的截图:

我用我的input做了什么是创build一个列表视图,把我所有的input到列表项,并去除所有input-JQM-CSS。 这应该给你一个透明的input坐在列表视图项目的顶部,我认为这看起来非常好。 你也可以添加标签到input,我的例子是设置为与inField标签插件一起工作,所以你也已经有了所有这些类。

截图是从我的Android HTC 2.3.5,并显示inputtypes=“search”。 这是一个listviewsearchfilter,我剥离了大多数JQM-css。 我已经从列表视图中进一步删除它,将其放置到我的窗体列表中,添加一个标签(不能看到,如果活动),并剥离所有的CSS,包括图标。

这里是我如何做我的列表表单的一个例子:

  <ul data-role="listview" data-inset="true" class="inputList"> <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c"> <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text"> <label for="item">item</label> <input type="text" name="item" id="item" /> </div></div> </li> <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c"> <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text"> <label for="item2">item2</label> <input type="text" name="item2" id="item2" /> </div></div> </li> </ul> 

CSS:

 .inputList li div.ui-btn-inner { background: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; } .inputList label { margin: 3px 0 0 !important; } // styling of text inputs! .inputList input.ui-input-text, .inputList textarea.ui-input-text { width: 93%; margin-left: 1%; padding: 0.6em 0; text-indent: 80px; /* hard-coded - doesn't work on Android */ border-width: 0px; background: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; -moz-border-radius:0px; -webkit-border-radius: 0px; border-radius: 0px; } .inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner { padding: 0px !important; } // labels, from inField label plugin, but not active .inField { position:relative } .inField label { line-height: 2.25em; vertical-align: middle; position:absolute; left:8pt; width: inherit !important; } 

我希望这是所有的CSS。 如果你试图设置它,它看起来很糟糕,让我知道。

这样的工作看起来非常好,我的HTC 2.3.4我的CSS仍然需要一些抛光。 我需要减lessinput宽度和alignment:中心,所以下面的列表项的边界保持可见。

除此之外,这将是一个不错的Android解决schemeinput。 只需剥离所有的JQM-CSS,并放置一个listview-li。

Android的listview搜索过滤器输入

这是我的代码:

 input { -webkit-user-modify: read-write-plaintext-only; -webkit-tap-highlight-color: rgba(255,255,255,0); } 

我只是在这里猜测,你可能已经尝试过,但是

 -webkit-appearance: none; 

可以做的伎俩。 我甚至没有一个Android设备,但在iPhone上,它排除了大多数input相关的样式问题,因为它完全剥离了默认的浏览器应用样式。 反正值得一炮!

 -webkit-user-modify: read-write-plaintext-only; 

-webkit抽头高亮颜色:RGBA(0,0,0,0); 大纲样式:无;

这将在Android 4.0中正常工作,但是当你使用这个代码的数字input字段不支持bcoz只读的纯文本,我有这个问题,请任何人build议。

@czuendorf,5月13日13:53:也为我工作(也是Android 4.0)。

但是,如果您使用type =“number”的input,那么当您input字段时,数字键盘不会再popup,而是显示常规键盘。

如果删除-webkit-user-modify,则会再次显示右键盘,但input元素在编辑时显示为边框。 在我的情况下,input叠加混乱了布局(向下移动了一些内容),但是这不会发生这个新的CSS代码。

我确认了czuendorf补丁的macros观分析。 这些行为从一个Android版本到另一个版本差别很大。 我用Android 4.0.3在一个真正的HTC设备上testing它,轮廓消失(太棒了!),但它打开了一些严重的键盘问题(我看到单个按键不显示在领域,和其他奇怪的行为…) 。 在模拟器中不会出现键盘问题。 我还没有find真正的设备的任何解决scheme。 这是一个耻辱!