fixed the text-area in contact page

Counselllor · May 25, 2024 · 12166e6 · 12166e6
1 parent 26e54c8
commit 12166e6
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/src/components/Contact/Contact.css b/src/components/Contact/Contact.css
@@ -54,6 +54,7 @@
   border-radius: 10px 0 0 10px;
 }
 
+
 .contact-form-wrapper {
   background-color: #ffffff8f;
   border-radius: 0 10px 10px 0;
@@ -124,6 +125,7 @@
 }
 
 .cform-item {
+  margin-top: 15px;
   position: relative;
 }
 
@@ -152,25 +154,30 @@
 }
 #m-textarea {
     width: 100%;
+    height: 90px;
     outline: 0;
     border: 1px solid #ccc;
     border-radius: 4px;
     margin-bottom: 20px;
     padding: 12px;
     font-size: clamp(15px, 1.5vw, 18px);
+    resize: none;
   }
-
-
 
-.cinput:focus+.clabel, 
-.cinput:valid+.clabel, 
-.ctextarea:focus+.clabel, 
-.ctextarea:valid+.clabel {
-  font-size: clamp(13px, 1.3vw, 16px);
-  color: #777;
-  top: -20px;
-  transition: all .225s ease;
+  #m-textarea.focused::label {
+    color: #f7f1f1;
+    background: #1f2e43;
 }
+.cinput:focus + .clabel, 
+.cinput:valid + .clabel, 
+.ctextarea:focus + .clabel,
+.ctextarea:valid + .clabel {
+    font-size: clamp(13px, 1.3vw, 16px);
+    color: #777;
+    top: -20px;
+    transition: all .225s ease;
+}
+
 
 .csubmit-btn {
   background-color: #fd917e;

diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
@@ -88,10 +88,10 @@ const Contact = () => {
           <label className='clabel'>Email:</label>
         </div>
         <div class="cform-item">
-          <textarea id='m-textarea' className='ctextarea' class="" name="message" required></textarea>
-          <label className='clabel'>Message:</label>
+          <textarea id="m-textarea" class="ctextarea" name="message" required></textarea>
+          <label class="clabel">Message:</label>
         </div>
-        <button class="csubmit-btn">Send</button>  
+        <button class="csubmit-btn">Send</button>
       </form>
     </div>
   </div>