title: why float label not working in html css form
body: <p>Float label is work when the field is required. When i remove required attribute from the input tag it stop working.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
    margin-top:40px;
  }
  .btn-add input[type="text"]{
      width: 90%;
      padding: 10px 20px 0 20px;
      border: none;
      border-bottom:1px solid #999;
      font-size: 140%;
      color: #000;
  }
  .btn-add input:focus ~ .floating-label,
  .btn-add input:not(:focus):valid ~ .floating-label{
      top: -20px;
      bottom: 10px;
      left: 10px;
      font-size: 20px;
      opacity: 1;
      color: rgb(100, 6, 6);   
  }
  .btn-add-link input[type="url"]{
      width: 90%;
      padding: 10px 20px 0 20px;
      border: none;
      border-bottom:1px solid #999;
      font-size: 140%;
      color: #000;
  }
  .btn-add-link input:focus ~ .floating-label,
  .btn-add-link input:not(:placeholder-shown)~.floating-label,
  .btn-add-link input:not(:focus):valid ~ .floating-label{
      top: -20px;
      bottom: 10px;
      left: 10px;
      font-size: 20px;
      opacity: 1;
      color: rgb(100, 6, 6);   
  }
  .floating-label {
      position: absolute;
      pointer-events: none;
      left: 20px;
      top:10px;
      transition: 0.2s ease all;
      color: #999999;
      font-size: 120%;
  }
  .form-float{
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-float btn-add"&gt; 
       &lt;input type="text" class="inputText"  &gt;                             
       &lt;label class="floating-label"&gt;Button text&lt;/label&gt;                         &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I don't want this field as required field how can i fix it. how can i do that float label work without making input required</p>