不确定这是一个可行的解决方案和答案,但我的输入在注释掉这些内容后开始在 Android 上播放,这一切都对我的 Android (HTC2.3) 文本输入和选择造成了严重破坏
/* really bad */
-webkit-backface-visibility: hidden;
/* your normal bad */
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
如果你想设置默认输入的样式,我正在使用这些:
/* native placeholder styling */
::-webkit-input-placeholder {
color:#555555;
}
:-moz-placeholder {
color:#555555;
}
.inField label {
color:#555555;
cursor: text;
}
注释掉第一个 webkits 后,Android 对我来说工作正常。不过,我也覆盖了很多其他的东西。
还可以看看下面的截图:
我对输入所做的是创建一个列表视图,将我所有的输入放入列表项中,并剥离所有输入-JQM-CSS。这应该为您提供位于列表视图项目顶部的透明输入,我认为这看起来非常好。您还可以向输入添加标签,我的示例设置为使用 inField 标签插件,因此您也已经拥有所有这些类。
屏幕截图来自我的 Android HTC 2.3.5,显示输入 type="search"。这是一个列表视图搜索过滤器,我去掉了大多数 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 仍然需要一些改进。我需要减小输入宽度并对齐:居中,以便下面列表项的边框保持可见。
除此之外,这对于糟糕的 Android 输入来说是一个不错的解决方案。只需剥离所有 JQM-CSS 并将 listview-li 放在后面。