Textarea Progress

tasks/guestBook/components/newComment.php

@@ -1,30 +1,3 @@
-<style>
-  #comment {
-    resize: none;
-    overflow: hidden;
-  }
-
-  #comment-count {
-    right: 3px;
-    bottom: 0;
-  }
-
-  @supports selector(:has(html)) {
-    .was-validated .position-relative:has(:invalid)~.invalid-feedback {
-      display: block;
-    }
-
-    .was-validated :invalid~.invalid-feedback {
-      display: none !important;
-    }
-  }
-
-  @supports not selector(:has(html)) {
-    .was-validated :invalid~#comment-count {
-      display: none;
-    }
-  }
-</style>
 <form action="comment.php" method="post" class="needs-validation row m-0" novalidate>
   <div class="col">
     <h4 class="mb-3">Leave a Comment!</h4>
@@ -40,20 +13,15 @@
         Please enter a name.
       </div>
     </div>
-    <div class="mb-3">
-      <div class="position-relative">
-        <textarea class="form-control" id="comment" name="comment" maxlength="250" required placeholder="Comment here"></textarea>
-        <div class="invalid-feedback">
-          Please enter text.
-        </div>
-        <small class="text-muted position-absolute" id="comment-count">
-          0/250
-        </small>
-      </div>
+    <div class="mb-1">
+      <textarea class="form-control" id="comment" name="comment" maxlength="250" required placeholder="Comment here"></textarea>
       <div class="invalid-feedback">
         Please enter text.
       </div>
     </div>
-    <button class="btn btn-primary mb-3">Comment</button>
+    <div class="progress mb-3">
+      <div class="progress-bar" id="comment-count" style="width: 0;"></div>
+    </div>
+    <button type="submit" class="btn btn-primary mb-3">Comment</button>
   </div>
 </form>