如何将输入字段扩展到对话框宽度的100％？

Question

我正在使用jQuery mobile 1.3并且在弹出对话框的样式方面遇到了一些麻烦。 对话框如下所示：

html代码显示在：

之后

<div data-role="popup" id="AddingDialog" data-overlay-theme="a" data-theme="c" style="max-width:500px;" class="ui-corner-all">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Modify Item</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Adding new item</h3>
            <div data-role="fieldcontain"  >
            <input type="text" name="name" id="addItemInput" placeholder="label of new item" maxlength="100" value=""  />
        </div>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
        <a href="#" data-role="button" data-inline="true" data-rel="back"
            data-theme="b" data-transition="flow" id="doAddItem">Yes</a>
    </div>
</div>

我希望对话框更宽，输入字段扩展到对话框的整个宽度，并且按钮对齐。

使用Firefox开发工具（Examiner）进行探索我发现在某处定义了78％的宽度。但我不知道如何消除这种限制。当点击输入字段并且在取消选择时保持在那里时，我也不会对这个蓝色阴影感到非常兴奋。

我不是使用jQuery mobile进行CSS编程的专家。

Answer 1

<强>更新

要删除文本框阴影，您需要覆盖JQM CSS ui-focus。

在JQM样式表之后添加以下样式以覆盖它。

.ui-input-text.ui-focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
}

以下是 popup 的最终结果。

Jquery mobile有一个内置的网格系统，便于定位和对齐页面内容。以下是JQM文档的链接：http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html