jQuery Mobile输入框宽度

Question

我无法更改jQuery Mobile页面上<input>标签的宽度，有什么想法吗？ http://www.nuhack.com/stackoverflow-question/

- Barrie Reader

---

覆盖 div.ui-input-text 和 div.ui-input-search 以适应搜索输入 http://jsfiddle.net/Palestinian/bRszY/，因为 type=search 与其他输入类型不同。 - Omar

把那个放在答案里，我会接受的 @Omar - 完美，我已经折腾了很久！！！【谢谢！】 - Barrie Reader

你也可以覆盖.ui-btn，但这将覆盖所有具有该类的按钮。或者，使用带有data-role=button的<a>并给它一个自定义类，然后覆盖它，即.ui-custom-btn { width: 50px !important } http://jsfiddle.net/Palestinian/bRszY/ 演示已更新为自定义按钮。 - Omar

Answer 1

jQuery Mobile将所有输入类型都包装在一个带有类.ui-input-text的div中，除了具有类.ui-input-search的type=search。你只需要覆盖这些类即可。

演示

所有输入类型：

div.ui-input-text { width: 50px !important }

搜索框：

div.ui-input-search { width: 50px !important }

- Omar

---

@Omar：嗨，Omar，我认为提交按钮的类是ui-input-btn而不是ui-input-text。将ui-input-text和ui-input-btn设置相同的宽度实际上不会在UI上反映出相同的宽度。奇怪。 - Malloc

@Malloc 你好，我会检查一下。也许1.4版本在你使用的时候有所不同。你是使用input还是button标签？ - Omar

我在上面写评论时使用了input标签。但现在我正在使用button标签，宽度问题已经解决 :) - Malloc

如何仅更改一个JQM输入的大小？CSS选择器对我无效。 - Vito

@Vito 这应该由js完成。或者将该输入框包装在一个div中，给该div一个类或id，然后通过CSS覆盖它。例如 .foo .ui-input-text { 新样式 }。 - Omar

Answer 2

如果要让按钮包裹文本，请使用 data-inline="true" 属性。

<input  data-inline="true" id="btn_1"  type="button" value="click here"/></h4>

- user2814778

---

接受的答案对我不起作用，这个可以。谢谢。 - SamChen