在标签元素(JQuery Mobile)中添加文本框 - 样式问题

时间:2013-03-25 03:36:23

标签: jquery css jquery-mobile

我想在JQuery mobile中的单选按钮的标签中有一个文本框,但它似乎是将文本框的父div设置为2px高度。

<fieldset data-role="controlgroup">
    <input type="radio" name="radio-choice" id="radio-choice-1" value="yes" checked="checked" />
    <label for="radio-choice-1">
        Yes <input type="password" placeholder="Password"/>
    </label>
    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  />

    <label for="radio-choice-2" >No</label>
</fieldset>

希望你能从中看到我想要完成的事情。也许有更好的方法来做到这一点,而不是添加一个CSS解决方法。我已将问题的示例添加到http://jsfiddle.net/yDhP3/

1 个答案:

答案 0 :(得分:0)

看看这是否满足您的需求!!!

http://jsfiddle.net/pramodsankar007/55jZM/

<div id="yourCredentials" data-role="page" class="ui-page ui-body-c ui-page-active">
    <div data-role="header" data-theme="b">
         <h1>Login/Register</h1>

    </div>
    <div data-role="content">
         <h3>Your credentials</h3>

        <input type="text" id="email" value="" data-mini="true" placeholder="Email address" class="">
         <h3>Are you a returning user?</h3>

        <fieldset data-role="controlgroup">
            <input type="radio" name="radio-choice" id="radio-choice-1" value="yes" checked="checked" />
            <label for="radio-choice-1">Yes
                <input type="password" placeholder="Password" class="pwdInner" />
            </label>
            <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
            <label for="radio-choice-2">No</label>
        </fieldset>
        <button>Login/Register</button>
    </div>
</div>


$('#radio-choice-1').click(function()
                           {
                               $('input.pwdInner').show();
                           });
$('#radio-choice-2').click(function()
                           {
                               $('input.pwdInner').hide();
                           });


input.pwdInner
{
    position:relative !important;

}