如何将输入字段扩展到对话框宽度的100%？
如何将输入字段扩展到对话框宽度的100%？
提问于 2013-03-13 18:04:22
我使用的是jQuery Mobile1.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手机CSS编程的专家。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-03-13 23:26:26
更新
为了移除文本框阴影，您需要覆盖JQM CSS ui-focus。
在JQM样式表之后添加下面的样式以覆盖它。
.ui-input-text.ui-focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}这是的最终外观。
Jquery mobile有一个内置的网格系统，可以方便地定位和对齐页面内容。以下是指向JQM文档的链接：http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15393067
复制相关文章
点击加载更多
相似问题
如何将输入字段扩展到父级的100%
100%宽度未完全扩展到100%
将宽度扩展到100%
如何将<div>水平扩展到100%宽度？
将div扩展到100%宽度
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
