Question

jQuery Mobile自动将其添加到＆lt;输入＆gt;。如何覆盖它并从div中删除上边距？

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> <input id="myinput"> </div>

div的css看起来像：

.ui-input-text input, .ui-input-search input, textarea.ui-input-text {
-moz-box-sizing: border-box;
display: block;
line-height: 1.4em;
outline: 0 none;
padding: 0.4em;
width: 100%;
}

Answer 1

<强> DEMO

您可以使用父容器类名称为输入编写新的CSS，以便它具有更高的优先级

<强> HTML

<div class="wrap">
<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
    <input id="myinput" />
</div>
</div>

<强> CSS

.wrap .ui-input-text input{
    border:1px solid red; /*desired style*/
    margin-top:0;
}

Answer 2

从jqm 1.4开始，您应该在class="ui-field-contain"和data-role="fieldcontain"标记周围使用<label>代替<input>。要调整每个字段集的垂直间距，您可以使用简单的附加样式属性覆盖<div>标记的边距：

<div class="ui-field-contain" style="margin-top:2px;margin-bottom:2px;">
  <label for="field1">Field label:</label>
  <input type="text" name="field1" data-mini="true" id="field1" />
<div>

删除jQuery Mobile中<input />周围的“margin”

2 个答案: