May 14, 2012
how to design grouped input text fields in one rounded corner box in jQuery Mobile
Question by EMMNS
can anyone tell me how can I put multiple text input fields in one grouped rounded corner box?
also with text place holder.
please see the attached image
I was trying from my side the code bellow:
<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">
</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>
thanks in advance
Answer by Starx
I dont have your CSS to work with. So, here is a simple alternative.
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>
Demo
