jquery - 如何在 jQuery Mobile 中的一个圆角框中设计分组输入文本字段

Question

谁能告诉我如何将多个文本输入字段放在一个分组的圆角框中？

还带有文本占位符。

请看附图

我正在尝试下面的代码：

<div data-role="content" data-inset="true" data-theme="b">
    <div data-role="fieldcontain">
    <form id="frmLogin" action="#" method="POST" data-transition="slide">
      <fieldset data-role="controlgroup" class="ui-corner-all ui-controlgroup ui-controlgroup-vertical">

        <div class="ui-field-contain">
          <label id="txtLoginName" for="loginName"></label>
          <input type="text" name="loginName" id="loginName" value=""  class="required"/>
        </div>
        <div class="ui-field-contain">
          <label id="txtLoginPassword" for="loginPassword"></label>
          <input type="password" name="password" id="loginPassword" value="" class="required"/>
        </div>

        <div class="ui-grid-a">
          <div class="ui-block-a">
            &nbsp;
          </div>
          <div class="ui-block-b">
            <a id="btnLoginSubmit" href="#" data-role="button" data-transition="slide" data-inline="true"></a>
          </div>
        </div>

      </fieldset>
    </form>
    </div>
  </div>

提前致谢

Answer 1

我没有你的 CSS 可以使用。所以，这里有一个简单的替代方案。

CSS：

div {
    border: 2px #ddd solid;
    border-radius: 20px;
    width: 300px;
    padding: 20px;
}
div input {
    border: none;
    width: 260px;
    padding: 20px;
}
div input:not(:last-child) {
    border-bottom: 1px #ddd solid;
}

HTML：

<div>
    <input type="text"  value="email"/>
    <input type="password" value="password" />
</div>

演示