Как отформатировать текстовые поля jQuery Mobile

Question

У меня очень простая мобильная страница jquery. Он имеет верхний колонтитул, нижний колонтитул, а тело запрашивает логин и пароль с текстовыми полями, а затем вы можете отправить.

Моя проблема в том, что jQuery Mobile заставляет текстовые поля содержать около 100 символов, что делает мой дисплей слишком маленьким. Есть ли способ заставить его сделать так, чтобы текстовые поля содержали только около 12 символов, а затем увеличивали все в теле?

Вот мой код:

<div data-role="page" id="login">
    <div data-role="header">
        <h1>heade</h1>
    </div>
    <div data-role="content">
        <form action="login.py" id="login_form" data-ajax="false">
        <div data-role="fieldcontain">
            <label for="name" style="font-size: px; font-weight: bold;"> User Name: </label> 
            <input type="text" name="uname" minlength="3" />
        </div>
        <div data-role="fieldcontain">
            <label for="password"> Password:&nbsp;&nbsp; </label> 
            <input type="password" name="password" />
        </div>
        <div id="submitDiv" data-role="fieldcontain">
            <fieldset class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="reset" value="Reset" />
                </div>
                <div class="ui-block-b">
                    <input type="submit" value="Submit" />
                </div>
            </fieldset>
        </div>
        </form>
        </div>
        <div data-role="footer">
            <div data-role="navbar">
                <ul>

                </ul>
        </div>
    </div>
</div>

Answer 1

Я вижу, что это сообщение старое, но, возможно, это кому-то поможет ...

Вы пытались добавить что-то подобное в свой CSS?

div input { width: 12px !important; }