jquery - jQuery Mobile の 1 つの丸い角のボックスにグループ化された入力テキスト フィールドを設計する方法

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>

デモ