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

减小文本框的高度

bootstrap-4 css html

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>

我想要这样的高度:

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

2 回复 | 直到 6 年前

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>

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>