代码之家  ›  专栏  ›  技术社区  ›  Anjali

减小文本框的高度

  •  0
  • Anjali  · 技术社区  · 6 年前

    我正在尝试减小文本框的高度。样式表似乎不会降低文本框的高度。下面是我的代码和样式表。

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
    .textmargin{
        margin-left: 50px;
    }
    
    .new5 {
        border: 5px solid green;
        border-radius: 2px;
    }
    
    .textBoxwidthlarge{
    
        width:40%
    }
    
    .textBoxwidthMedium {
        width: 20%
    }
    .textBoxwidthSmall {
        width: 40%
    }
    
    input[type="text"] {
        padding: 12px 10px;
        line-height: 2px;
        border: 2px solid black;
    }
    </style>
        <div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
            <input type="text" runat="server"  class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>

    我想要这样的高度:

    enter image description here

    任何帮助都将不胜感激。我有三个文本框。我只在上面展示一个。

    2 回复  |  直到 6 年前
        1
  •  1
  •   Rohan Rao    6 年前

    从代码中删除所有不必要的样式,只保留一个类来设置其宽度。

    .textBoxwidthlarge {
      width: 100%;
    }
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    
    <div class="col-md-12"><label for="fname" class="textmargin">First Name</label><br />
      <input type="text" runat="server" class="input-field textmargin textBoxwidthlarge" id="name1" name="t1" /> </div>
        2
  •  2
  •   Ender    6 年前

      <div class="col-md-4"><label for="fname" class="textmargin">First Name</label><br />
                <input type="text" runat="server"  class="textmargin textBoxwidthlarge txtboxhg" id="name1" name="t1" /> </div>
                
     <style>
    input[type="text"]{ padding: 12px 10px; line-height: 12px; width:100%}
    </style>
        3
  •  1
  •   Dr Yao Strange    6 年前

    height: 1px;
    border: 2px solid red;
    

    .txtboxhg