禁用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。
这是我的代码：
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。 这是一个耻辱！
