【问题标题】: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 之后我更新了小提琴。但老实说,我不会为你做一切。你有很多工作要做,你的问题得到了回答。我什至更新了我的答案,因此您可以区分默认输入框和小输入框。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2023-01-23
        • 2016-07-18
        • 1970-01-01
        • 2010-12-10
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多