title: How to use CSS to style Textbox and Label in ASP.NET
body: <p>I want to style a Textbox and a Label in ASP.NET (  and  ), i have a CSS style that works fine for me with normal inputs and and labels but it wont work with ASP Textboxs and Labels.
  First of all here is the CSS style :</p>
  
  <pre><code>form h1 {
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  margin-left: 15px;
  margin-bottom: 35px;
  text-transform: uppercase;
  }
  
  form button {
  margin-top: 35px;
  background-color: white;
  border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  display: inline-block;
  box-sizing: border-box;
  padding: 20px 15px;
  border-radius: 60px;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
  }
  
  form button:hover, form button:focus {
      color: white;
      background-color: #ff4a56;
  }
  
  form .question {
  position: relative;
  padding: 10px 0;
  }
  
  form .question:first-of-type {
      padding-top: 0;
  }
  
  form .question:last-of-type {
      padding-bottom: 0;
  }
  
  form .question label {
      transform-origin: left center;
      color: #ff4a56;
      font-weight: 100;
      letter-spacing: 0.01em;
      font-size: 17px;
      box-sizing: border-box;
      padding: 10px 15px;
      display: block;
      position: absolute;
      margin-top: -40px;
      z-index: 2;
      pointer-events: none;
  }
  
   form .question input[type="text"] {
      -webkit-appearance: none;
      background-color: none;
      border: 1px solid #ff4a56;
      line-height: 0;
      font-size: 17px;
      width: 100%;
      display: block;
      box-sizing: border-box;
      padding: 10px 15px;
      border-radius: 60px;
      color: #ff4a56;
      font-weight: 100;
      letter-spacing: 0.01em;
      position: relative;
      z-index: 1;
  }
  
      form .question input[type="text"]:focus {
          outline: none;
          background: #ff4a56;
          color: white;
          margin-top: 30px;
      }
  
      form .question input[type="text"]:valid {
          margin-top: 30px;
      }
  
      form .question input[type="text"]:focus ~ label {
          -moz-transform: translate(0, -35px);
          -ms-transform: translate(0, -35px);
          -webkit-transform: translate(0, -35px);
          transform: translate(0, -35px);
      }
  
      form .question input[type="text"]:valid ~ label {
          text-transform: uppercase;
          font-style: italic;
          -moz-transform: translate(5px, -35px) scale(0.6);
          -ms-transform: translate(5px, -35px) scale(0.6);
          -webkit-transform: translate(5px, -35px) scale(0.6);
          transform: translate(5px, -35px) scale(0.6);
      }
  
    form .question input[type="password"] {
      -webkit-appearance: none;
      background-color: none;
      border: 1px solid #ff4a56;
      line-height: 0;
      font-size: 17px;
      width: 100%;
      display: block;
      box-sizing: border-box;
      padding: 10px 15px;
      border-radius: 60px;
      color: #ff4a56;
      font-weight: 100;
      letter-spacing: 0.01em;
      position: relative;
      z-index: 1;
    }
  
      form .question input[type="password"]:focus {
          outline: none;
          background: #ff4a56;
          color: white;
          margin-top: 30px;
      }
  
      form .question input[type="password"]:valid {
          margin-top: 30px;
      }
  
      form .question input[type="password"]:focus ~ label {
          -moz-transform: translate(0, -35px);
          -ms-transform: translate(0, -35px);
          -webkit-transform: translate(0, -35px);
          transform: translate(0, -35px);
      }
  
      form .question input[type="password"]:valid ~ label {
          text-transform: uppercase;
          font-style: italic;
          -moz-transform: translate(5px, -35px) scale(0.6);
          -ms-transform: translate(5px, -35px) scale(0.6);
          -webkit-transform: translate(5px, -35px) scale(0.6);
          transform: translate(5px, -35px) scale(0.6);
      }
  </code></pre>
  
  <p>when i try that style with this code it works fine :</p>
  
  <pre><code>   &lt;div class="question"&gt;
          &lt;input type="text" required=""&gt;
          &lt;label&gt;Last Name&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="question"&gt;
          &lt;input type="text" required=""&gt;
          &lt;label&gt;Email Address&lt;/label&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>but when i try it with this code the transition wont work :</p>
  
  <pre><code>&lt;li class="question"&gt;
                          &lt;asp:Label runat="server" AssociatedControlID="UserName"&gt;User name&lt;/asp:Label&gt;
                          &lt;asp:TextBox runat="server" ID="UserName" /&gt;
                          &lt;asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="The user name field is required." /&gt;
                      &lt;/li&gt;
                      &lt;li class="question"&gt;
                          &lt;asp:Label runat="server" AssociatedControlID="Password"&gt;Password&lt;/asp:Label&gt;
                          &lt;asp:TextBox runat="server" ID="Password" TextMode="Password" /&gt;
                          &lt;asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="field-validation-error" ErrorMessage="The password field is required." /&gt;
                      &lt;/li&gt;
  </code></pre>