title: How to modify "sign in" page using CSS?
body: <p>I am trying to modify a regular sign in page. I want the input as lines instead of boxes. I am posting the link to the sign in page image I have right now:</p>
  
  <p><a href="http://prntscr.com/2o9n8z" rel="nofollow">http://prntscr.com/2o9n8z</a></p>
  
  <p>Instead of the boxes here, I want the email address, password and confirm password fields as lines. </p>
  
  <p>My CSS code is below:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  /* ---------- GENERAL ---------- */
  /*
  body {
      background: #FFFFFF;
      color: #999;
      font: 100%/1.5em sans-serif;
      margin: 0;
  }
  */
  
  
  a {
      color: #999;
      text-decoration: none;
  }
  
  a:hover { color: #1dabb8; }
  
  fieldset {
      border: none;
      margin: 0;
  }
  
  input {
      border: none;
      font-family: inherit;
      font-size: inherit;
      margin: 0;
      -webkit-appearance: none;
  }
  
  input:focus {
    outline: none;
  }
  
  input[type="submit"] { cursor: pointer; }
  
  .clearfix { *zoom: 1; }
  .clearfix:before, .clearfix:after {
      content: "";
      display: table; 
  }
  .clearfix:after { clear: both; }
  
  
  #login-form {
      margin: 50px auto;
      width: 300px;
  }
  
  #login-form h3 {
      background-color: #79a002;
      border-radius: 5px 5px 0 0;
      color: #fff;
      font-size: 14px;
      padding: 20px;
      text-align: center;
      text-transform: uppercase;
  }
  
  #login-form fieldset {
      background: #fff;
      border-radius: 0 0 -1px -1px;
      padding: 0px;
  
  }
  
  #login-form fieldset:before {
      background-color: #fff;
      content: "";
      height: 8px;
      left: 50%;
      margin: -4px 0 0 -4px;
      position: absolute;
      top: 0;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      width: 8px;
  }
  
  #login-form input {
      font-size: 14px;
  }
  
  #login-form input[type="email"],
  #login-form input[type="password"] {
      border: 1px solid #dcdcdc;
      padding: 12px 10px;
      width: 300px;
  }
  
  #login-form input[type="email"] {
      border-radius: 3px 3px 0 0;
  }
  
  #login-form input[type="password"] {
      border-top: none;
      border-radius: 0px 0px 3px 3px;
  }
  
  #login-form input[type="submit"] {
      background: #1dabb8;
      border-radius: 3px;
      color: #fff;
      float: right;
      font-weight: bold;
      margin-top: 20px;
      padding: 12px 20px;
  }
  </code></pre>
  
  <p>I am modifying the  <code>border: 1px solid #dcdcdc;</code> in :</p>
  
  <pre><code>#login-form input[type="email"],
  #login-form input[type="password"] {
      border: 1px solid #dcdcdc;
      padding: 12px 10px;
      width: 300px;
  }
  </code></pre>
  
  <p>But I haven't been able to get the required output. What should I change in my code to get the required result ?</p>