如何使用jQuery mobile减少文本字段的宽度？

Question

请告诉我如何使用jQuery mobile减少文本字段的宽度？

Fiddle

使用此CSS无效

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

#co input{

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

Answer 1

它是输入周围的框，用于设置大小，并且样式为“漂亮”。这就是你需要改变的地方。

#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/

Answer 2

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

Answer 3

检查它......它的作品！

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;
 }