如何使用 jQuery mobile 减小文本字段的宽度？答案

【问题标题】：How to reduce the width of textfield using jQuery mobile?如何使用 jQuery mobile 减小文本字段的宽度？
【发布时间】：2014-03-10 09:38:55
【问题描述】：

您能告诉我如何使用 jQuery mobile 减小文本字段的宽度吗？

Fiddle

使用这个 CSS 不行

#co label{
    color: red !important;
    width: 100px !important;
    margin :30px;
}

#co input{

    width: 100px !important;
    border-radius: 0 !important;
}

【问题讨论】：

标签： jquery css jquery-mobile

【解决方案1】：

 #co .ui-input-text
 {
    width: 100px;
  }

【讨论】：

【解决方案2】：

检查它...它的作品！

HTML 代码

   <div data-role="content" id="co">
      <div data-role="fieldcontain">
         <label >User Name</label>
        <input type="text"/>
    </div>

CSS 代码

    #co label{
     color: red !important;
     width: 100px !important;
     margin :30px;
     }
   #co .ui-input-text{
   width: 100px;
   border-radius: 50;
 }

【讨论】：

【解决方案3】：

它是围绕输入框设置大小的框，其样式为“漂亮”。所以这就是你需要改变的。

#co div.ui-input-text{
    width: 100px;
}

JSFiddle：http://jsfiddle.net/BKbZB/3/

如果您想要混合使用默认和小输入框，您可以这样做：

<div data-role="fieldcontain" class="small-input">
    <label >User Name</label>
    <input type="text"   />
</div>

CSS：

.small-input div.ui-input-text{
    width: 100px;
    padding: 0px 2px;
}

JSFiddle：http://jsfiddle.net/BKbZB/5/

【讨论】：

但如果我创建另一个文本字段，它只会产生 100 像素
@user1542984 好吧，我确定您在这里有很多工作要做吗？只需更改 ID，或对其他课程做任何您想做的事情。这也不是你的问题。
如果您填写文本，请检查用户在小提琴上的回答，文本超出框
您的回答中有错误，请填写它将超出的文本字段
@user1542984 之后我更新了小提琴。但老实说，我不会为你做一切。你有很多工作要做，你的问题得到了回答。我什至更新了我的答案，因此您可以区分默认输入框和小输入框。