Bootstrap de saisie de texte de la hauteur

J'essaie d'augmenter la saisie de texte à la hauteur à l'intérieur d'un formulaire sur un site, je suis de programmation. J'ai essayer de remplacer la valeur par défaut de bootstrap css de 20px de hauteur, mais rien ne semble changer. Voici mon code--

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; 
 }

le formulaire 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>

s'il vous plaît aider

InformationsquelleAutor user3485417 | 2015-06-09

6

Vous pouvez utiliser les css hauteur attribut à la fois comme
css :
```
<input style="height:50px"/>
```
ou de la classe
```
<input class="inputfield"/>
```
et LE CSS
```
.inputfield{

height:50px

}
```
InformationsquelleAutor Masud Shrabon
0

Basé sur le code que vous avez donné, vous n'êtes pas en utilisant bootstrap, donc je vais supposer que c'est ce que vous essayez d'atteindre. https://jsfiddle.net/127c14bu/

Si vous souhaitez remplacer la hauteur, vous pouvez ajouter une classe css sur votre entrée de texte qui contient la hauteur désirée. Voir la .overrideheight et modifier la valeur de height.

J'espère que cela aide.
- C'est exactement ce que je veux faire, mais le code ne fonctionne pas sur ma page.... J'utilise bootstrap que je place le formulaire à l'intérieur d'un div class=ligne
- Puissé-je voir ton code html?
- Voici le code. Il est généré par une jsp
InformationsquelleAutor Kenzo-kun

     <!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>

InformationsquelleAutor user3485417

Vous devez vous connecter pour publier un commentaire.