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

Question

我想在 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/

Answer 1

看看能不能满足你的需求！！！

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;

}