Не уверен, что это рабочее решение и ответ, но мои комментарии начали воспроизводиться на 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;
}
После комментирования первых веб-наборов Android работает нормально для меня. Я переопределяю множество других вещей, хотя тоже.
Также посмотрите скриншот ниже:
Что я сделал со своими входами, так это создал просмотр списка, поместил все мои входы в элементы списка и удалил весь input-JQM-CSS. Это должно дать вам прозрачный ввод поверх элемента списка, который, я думаю, выглядит действительно хорошо. Вы также можете добавить метки к входам, мой пример настроен для работы с плагином меток inField, так что у вас уже есть все эти классы.
Скриншот взят с моего Android HTC 2.3.5 и показывает тип ввода = "поиск". Это фильтр поиска по списку, который я удалил из большинства 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.
