jazzyy22 jazzyy22 - 19 days ago 5
CSS Question

CSS grid style change

I want it like this but with name
email"
password confirm pass



.container3 {
background: #cccccc;
width: 100%;
border: solid 1px white;
}
.col-md-4 h1{ color : #9f00a7; font-family: calibri, arial; font-weight: bold; font-size: 30px; position: relative; left: 30px;}
.header{ width : 100%; padding-top: 20px;height:100%}
.header a{color: rgb(100,100,100); padding: 20px; position: relative; top : 30px;font-family: calibri, arial;font-weight: 900; }
#col-md-4{ height: 50px;}
.control-label{float: left;}
.container .inner{background: transparent;width: 480px; margin: 100px auto; border : 1px solid none; padding: 10px; }
.inner h1{color : rgb(200,200,200); font-family: calibri, arial; font-weight: bold; text-align: center; font-size: 40px}
.inner h3{color: rgb(200,200,200); font-size: 18px; font-family: calibri; text-align: center; margin-top: -5px}
.inner form label span{color: white;}
.inner form lagend{color: white;}
.inner .input{width : 90%; border: none; border-bottom: 1px solid white; color: white; background: transparent; padding: 10px;}
.inner .input:focus{box-shadow: none; border: none;}
.container hr{border-color: rgb(100,100,100);}
.inner .button{border-radius:10px 10px 10px 10px;color: white; background: #cccccc; padding: 2px 30px ; border: 2px solid white; font-family: calibri; margin:10px auto; font-weight: bold;}
.inner .button:hover{background: #cccccc; color:red ;border: 2px solid red;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container container3">
<div class="inner" id="login">
<form action="">
<div class="row">
<div class="col-sm-4">
<label><span class="glyphicon glyphicon-user"></span>
</label>
<input type="text" placeholder='Username' class="input" />
</div>
</div>
<label><span class="glyphicon glyphicon-envelope"></span>
</label>
<input type="text" placeholder='Email' class="input" />
<br>
<label><span class="glyphicon glyphicon-lock"></span>
</label>
<input type="password" placeholder="Password" class="input" />
<label><span class="glyphicon glyphicon-check"></span>
</label>
<input type="password" placeholder="Confirm Password" class="input" />
<br>
<button type="submit" class="button">Sign in</button>
</form>
</div>
</div>





I have tried it for the first one and it isn't working. I also tried to do
style="width:600px"
but password and confirm password would come next to each other

I want it to be like this:

name
email
password confirm password


With the same exact CSS style as mine.

Answer

Sounds like you had 2 combining issues.

  1. You had extra <br /> tags between your password fields.
  2. Add a specific CSS to override the password input field width:
    • .inner .input[type="password"] {width : 42.5%;}

.container3 {
  background: #cccccc;
  width: 100%;
  border: solid 1px white;
}
.col-md-4 h1{ color : #9f00a7; font-family: calibri, arial; font-weight: bold; font-size: 30px; position: relative; left: 30px;} 
.header{ width : 100%; padding-top: 20px;height:100%}
.header a{color: rgb(100,100,100); padding: 20px; position: relative; top : 30px;font-family: calibri, arial;font-weight: 900;  }
#col-md-4{ height: 50px;}
.control-label{float: left;}
.container .inner{background: transparent;width: 480px; margin: 100px auto; border : 1px solid none; padding: 10px; }
.inner h1{color : rgb(200,200,200); font-family: calibri, arial; font-weight: bold; text-align: center; font-size: 40px}
.inner h3{color: rgb(200,200,200); font-size: 18px; font-family: calibri; text-align: center; margin-top: -5px}
.inner form label span{color: white;}
.inner form lagend{color: white;}
.inner .input{width : 90%; border: none; border-bottom: 1px solid white; color: white; background: transparent; padding: 10px;}
.inner .input:focus{box-shadow: none; border: none;}
.container hr{border-color: rgb(100,100,100);}
.inner .button{border-radius:10px 10px 10px 10px;color: white; background: #cccccc; padding: 2px 30px ;  border: 2px solid white;  font-family: calibri; margin:10px auto; font-weight: bold;}
.inner .button:hover{background: #cccccc; color:red ;border: 2px solid red;}
.inner .input[type="password"] {width : 42.5%;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container container3">
  <div class="inner" id="login">
    <form action="">
      <div class="row">
        <div class="col-sm-4">
          <label><span class="glyphicon glyphicon-user"></span>
          </label>
          <input type="text" placeholder='Username' class="input" />
        </div>
      </div>
      <label><span class="glyphicon glyphicon-envelope"></span>
      </label>
      <input type="text" placeholder='Email' class="input" />
      <br>
      <label><span class="glyphicon glyphicon-lock"></span>
      </label>
      <input type="password" placeholder="Password" class="input" />
      <label><span class="glyphicon glyphicon-check"></span>
      </label>
      <input type="password" placeholder="Confirm Password" class="input" />
      <br>
      <button type="submit" class="button">Sign in</button>
    </form>
  </div>
</div>