Html 引导文本输入高度_Html_Css_Twitter Bootstrap 3

Html 引导文本输入高度

html css twitter-bootstrap-3

Html 引导文本输入高度,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我试图在我正在编程的网站上增加表单中的文本输入高度。我试图覆盖20px高度的默认引导css，但似乎没有任何变化。这是我的密码-- css .inputfield { position:relative; top:30px; font-size: 60px!important; font-family:'Lato', sans-serif !important; font-weight: 400; color:white ; width:400px; line

我试图在我正在编程的网站上增加表单中的文本输入高度。我试图覆盖20px高度的默认引导css，但似乎没有任何变化。这是我的密码--

css

.inputfield
 {  
 position:relative;  
 top:30px;  
 font-size: 60px!important; 
 font-family:'Lato', sans-serif !important;
 font-weight: 400;
 color:white ; 
 width:400px;  
 line-height: 100px!important;  
 opacity:0.2; 
 }

及

表单HTML

  <form  class="text-center" action="" method="post">
  <div class="row">
 <input type="text" id="username" name="name" class="inputfield" placeholder="Username"><br><br>
 </div>
 <input id="password" type="password" name="password" class="inputfield" placeholder="Password"><br><br>
 <br>
 <input type="submit" id="submit" value="Login" /><br>
 </form>

请帮助

根据您提供的代码，您没有使用bootstrap，因此我假设这就是您试图实现的目标

如果要覆盖高度，可以在输入文本上添加另一个包含所需高度的css类。请参阅

.overrideeheight

并更改

高度的值
我希望有帮助。

     <!DOCTYPE html>

     <html>
     <head>
    <title>Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="/demo/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" />

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>

    <style >
    *{
     margin:0 !important;
     padding:0 ! important;
     }

      body {

        width: 100%;

        min-height: 800px;
        background-size: 100%;
        background-repeat: no-repeat;
        position:absolute;
        background-image: url(demo_BG_1024.png);
        background-color: rgb(0,0,0);

      }

      ul{
      padding-top: 0px;
      }

      .form-signin {
        width:500px !important;
        height:300px ! important;
       }

       .form-signin { 
         max-width: 500px; 
         padding: 19px 29px 29px; 
         margin: 0 auto 20px; 
         background-color: #fff; 
         border: 1px solid #e5e5e5; 
         -webkit-border-radius: 5px; 
            -moz-border-radius: 5px; 
                 border-radius: 5px; 
         -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); 
                 box-shadow: 0 1px 2px rgba(0,0,0,.05); 
       } 
       .form-signin .form-signin-heading, 
       .form-signin .checkbox { 
         margin-bottom: 10px; 
       } 
       .form-signin input[type="text"], 
       .form-signin input[type="password"] { 
         font-size: 16px; 
         height: auto; 
         margin-bottom: 15px; 
         padding: 7px 9px; 
      } 


    .left {
    float: left;
    display: block;
    width: 25%;
    padding-left: 0px;
    text-align: left;    
    }

    .right {
    float: right;
    display: block;
    width: 75%;
    text-align: right;
    padding-right: 0px;
    }

    .header
    {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        color: white;
        font-size: 64px;
        padding-top: 60px;
    }
     .header2
    {
        padding-top: 0px;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        color: white;
        font-size: 46px;

    }

     .header3
    {
        padding-top: 0px;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        color: white;
        font-size: 30px; 
    }

     .header4
    {
        padding-top: 0px;
        font-family: 'Lato', sans-serif;
        font-weight: 300;
        color: white;
        font-size: 18px; 
    }

    nav{
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
    width: 100%;
    height: 78px;
    padding:0 px;
    background-color: rgb(0,0,0);

    }

    ul li {
    list-style-type: none;
    margin: 0px;
    display: inline-block;
    }

    #logo_image
    {
    padding: 10px 30px!important;
    }


    .menu_buttons
    {
    font-family:'Lato', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color:white ;
    display: inline-block;
    padding: 10px 30px !important;
     }

   .demobtn {
    height:1.3em;
    width:2.5em;
    background-color:#00b6ee;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:'Lato', sans-serif;
    font-weight: 300;
    font-size:30px;
    padding:10px 100px;
    text-decoration:none;
    text-shadow:0px 0px 0px #2f6627;
  }
    .demobtn:hover {
     `enter code here`background-color:#00b6ee;
        text-decoration:none;
  }
   .demobtn:active {
    position:relative;
        text-decoration:none;
    top:1px;
   }

   .inputfield
   {
  position:relative;
  top:30px;
  font-size: 60px!important;
  font-family:'Lato', sans-serif !important;
    font-weight: 400;
    color:white ;
  width:400px;
  line-height: 100px!important; 
  opacity:0.2;

  }

  .overrideheight {
     height: 90px;
   }

  .sign-in
   {
    padding-top: 100px;
    margin-top:100px;
  }

  .myForm
   {
    position:relative;
    top:230px;
    margin-left: auto;
    margin-right: auto;
  }
      </style>

   </head>

    <body>
    <div class="row">

<nav>
    <ul class="left" ><li id="logo_image"><img alt="logo" src="img/demo_logo.png"></li></ul>




    <ul class="right" >

        <li><a class="menu_buttons" href="#">Login</a></li>
    </ul>

</nav>

</div>


<div class="row ">
<div class="myForm">
<div class="row sign-in ">
  <div class="col-xs-6 col-md-4 col-lg-4"></div>
  <div class="col-xs-6 col-md-4 col-lg-4 text-center"><h2 class="header2">Login to demo</h2></div>
  <div class="col-xs-6 col-md-4 col-lg-4"></div>
</div>
<br>


</div>
</div>

 <form  class="text-center form-group" action="" method="post">
  <div class="row">
 <input type="text" id="username" name="name" class="form-control overrideheight" placeholder="Username"><br><br>
 </div>
 <input id="password" type="password" name="password" class="form-control overrideheight" placeholder="Password"><br><br>
 <br>
 <input type="submit" id="submit" value="Login" /><br>
 </form>
<div class="navbar-fixed-bottom">
    <ul class="left">
        <li><a href="#" class="menu_buttons" >Home</a></li>
        <li><a href="#" class="menu_buttons" >About</a></li>
        <li><a href="#" class="menu_buttons" >Support</a></li>
    </ul>
    <ul class="right">
        <li><a href="#" class="menu_buttons" >Powered by Demo</a></li>
    </ul>
</div>
<script>
$(document).ready(function(){
    $("#submit").attr("disabled",true);
    var username = '';
    $("#username").on('change keyup paste mouseup', function() {
        if ($(this).val() != username) {
            username = $(this).val();
        }
    });
    var password = '';
    $("#username").on('change keyup paste mouseup', function() {
        if ($(this).val() != password) {
            password = $(this).val();
            if(username!=""&&password!="")
            {
                $("#submit").attr("disabled",false);
            }

        }
    });

});
</script>
</body>
</html>

登录
*{
边距：0！重要；
填充：0！重要；
}
身体{
宽度：100%；
最小高度：800px；
背景大小：100%；
背景重复：无重复；
位置：绝对位置；
背景图片：url（demo_BG_1024.png）；
背景色：rgb（0,0,0）；
}
保险商实验室{
填充顶部：0px；
}
.表格签名{
宽度：500px！重要；
高度：300px！重要；
}
.表格签名{
最大宽度：500px；
填充：19px 29px 29px；
保证金：0自动20px；
背景色：#fff；
边框：1px实心#e5；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
-webkit盒阴影：0 1px2pRGBA（0,0,0,05）；
-莫兹盒阴影：0 1px2pRGBA（0,0,0,05）；
盒影：0 1px2pRGBA（0,0,0,05）；
} 
.表格签名.表格签名标题，
.form signin.checkbox{
边缘底部：10px；
} 
.表单登录输入[type=“text”]，
.form sign输入[type=“password”]{
字体大小：16px；
高度：自动；
边缘底部：15px；
填充：7px 9px；
} 
.左{
浮动：左；
显示：块；
宽度：25%；
左侧填充：0px；
文本对齐：左对齐；
}
.对{
浮动：对；
显示：块；
宽度：75%；
文本对齐：右对齐；
右边填充：0px；
}
.标题
{
字体系列：“Lato”，无衬线；
字号：700；
颜色：白色；
字体大小：64px；
填充顶部：60px；
}
.校长2
{
填充顶部：0px；
字体系列：“Lato”，无衬线；
字体大小：300；
颜色：白色；
字体大小：46px；
}
.校长3
{
填充顶部：0px；
字体系列：“Lato”，无衬线；
字体大小：300；
颜色：白色；
字体大小：30px；
}
.校长4
{
填充顶部：0px；
字体系列：“Lato”，无衬线；
字体大小：300；
颜色：白色；
字号：18px；
}
导航{
位置：固定；
右：0；
左：0；
z指数：1030；
页边距底部：0；
宽度：100%；
高度：78px；
填充：0像素；
背景色：rgb（0,0,0）；
}
ulli{
列表样式类型：无；
边际：0px；
显示：内联块；
}
#标志和图像
{
填充：10px 30px！重要；
}
.菜单按钮
{
字体系列：'Lato'，无衬线；
字体大小：400；
字号：18px；
颜色：白色；
显示：内联块；
填充：10px 30px！重要；
}
demobtn先生{
高度：1.3em；
宽度：2.5em；
背景色：#00b6ee；
显示：内联块；
光标：指针；
颜色：#ffffff；
字体系列：'Lato'，无衬线；
字体大小：300；
字体大小：30px；
填充：10px 100px；
文字装饰：无；
文本阴影：0px 0px 0px#2f6627；
}
.demobtn:悬停{
`在此处输入代码`背景色：#00b6ee；
文字装饰：无；
}
.demobtn：活动{
位置：相对位置；
文字装饰：无；
顶部：1px；
}
.输入字段
{
位置：相对位置；
顶部：30px；
字体大小：60px！重要；
字体系列：'Lato'，sans serif！重要；
字体大小：400；
颜色：白色；
宽度：400px；
线高：100px！重要；
不透明度：0.2；
}
.超重{
高度：90px；
}
.登录
{
填充顶部：100px；
边缘顶部：100px；
}
.我的表格
{
位置：相对位置；
顶部：230像素；
左边距：自动；
右边距：自动；
}




登录演示




















$（文档）.ready（函数（）{
$（“#提交”）.attr（“已禁用”，真）；
var用户名=“”；
$（“#username”）.on（'change keyup paste mouseup'，function（）{
if（$（this）.val（）！=用户名）{
用户名=$（this.val（）；
}
});
var密码=“”；
$（“#username”）.on（'change keyup paste mouseup'，function（）{
if（$（this）.val（）！=密码）{
密码=$（this.val（）；
如果（用户名！=“”&密码！=“”）
{
$（“#提交”）.attr（“已禁用”，错误）；
}
}
});
});
您可以使用cssheight属性作为
内联css：
<input style="height:50px"/>

虽然可以附加一个CSS
文件来应用您的请求，但是Bootstrap已经有了一些预定义的类，这些类可以帮助您实现目标
在引导程序4中：
您可以使用.form control sm
或.form control lg
类操纵表单控件的大小
<input type="text" class="form-control form-control-sm">
<input type="text" class="form-control form-control">
<input type="text" class="form-control form-control-lg">

在引导程序3中：
可以使用.input lg
和.input sm
等类设置输入元素的高度
<input class="form-control input-sm" id="inputsm" type="text">
<input class="form-control" id="inputdefault" type="text">
<input class="form-control input-lg" id="inputlg" type="text">


用于引导4+使用
<input type="text" class="form-control form-control-lg mb-2">

<input class="form-control input-sm" id="inputsm" type="text">
<input class="form-control" id="inputdefault" type="text">
<input class="form-control input-lg" id="inputlg" type="text">


<input type="text" class="form-control form-control-lg mb-2">