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

我正在使用jquerymobile1.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开发工具（审查员）的探索，我发现在某个地方定义了78%的宽度。但我不知道如何消除这个限制。当点击输入字段时会出现蓝色阴影，而当取消选择时，蓝色阴影仍然存在，我对此也不是很兴奋

---

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

更新

为了移除文本框阴影，您需要覆盖jqmcss

ui焦点

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

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

以下是的最终外观

---

jquerymobile有一个内置的网格系统，可以方便地定位和对齐页面内容。这里是JQM文档的链接：

检查这个例子中的蓝色阴影，我会给你一个答案。太好了！问题显然是这个div data rol=“fieldcontain”。现在，通过将size=40属性设置为输入字段，我可以拥有一个大字段。要解决的是按钮的精确定位和移除蓝色光环。我忘了移除数据inline=“true”。删除它并将数据角色弹出标签的样式最小宽度设置为所需的宽度后，现在就完美了。唯一剩下的问题是光环，但这不是一个大问题。非常感谢你。在哪里可以找到这些ui-grid-X和ui-block-X类的文档？我已经更新了关于如何删除文本框蓝色阴影的答案。div data role=“fieldcontain”取自1.2.0文档中给出的弹出示例。我认为这是必须的。非常感谢你。焦点光环被移除。回答得很好。非常感谢，你为我节省了很多时间。我很高兴我能帮上忙：）@chmike