解决方案

Question

我正在使用jquery-1.10.min.js和jquery-mobile-1.4.0.min.js并尝试自定义文本框的宽度。如果通过样式（css）或HTML标记应用我可以注意到轻微的变化，但仍然jquery css正在推翻它并且文本框的大小没有变化，它保持不变，100％。有什么可以解决它。以下是代码段。

  <script>
 .mystyle1
        {  .ui-input-text
        { width: 85px; display: inline-block; }}
        }        
        #box
        {
            width:20px;
        }
 </script> 
 <input id="box" type="text" class="mystyle" value="0" data-mini="true" />

Answer 1

首先，除非您学会调试自己的代码，否则您无法称自己为Web开发人员（各地的开发人员）。在这种情况下，您需要学习使用浏览器开发人员工具，以便看到真正的 HTML 结构。

这是 INPUT 类型文字的开始方式：

<input id="box" type="text" class="mystyle" value="0" data-mini="true" />

这就是jQuery Mobile重新设计它的方式：

<div class="ui-input-text ui-body-inherit ui-corner-all ui-mini ui-shadow-inset">
    <input type="text" data-mini="true" value="0" class="mystyle" id="box"/>
</div>

如果您想要更改INPUT宽度或位置，您可以看到需要修改 INPUT 元素父对象。

解决方案

工作示例：http://jsfiddle.net/Gajotres/vds2U/81/

HTML：

<span class="box-holder">
    <input id="box" type="text" class="mystyle" value="0" data-mini="true" />                    
</span>

CSS：

.box-holder .ui-input-text {
    width: 50px;
}

我已将 INPUT 元素与父 SPAN 元素包装在一起，我们可以使用CSS更改内部结构。其他解决方案是使用jQuery并访问INPUT parent。

自定义TextBox Jquery-1.10.min，js的宽度

1 个答案:

解决方案

HTML：

CSS：