What steps should I take to resolve the textarea border bottom CSS effect?

My simple border bottom animation is working fine with a basic input element, but it's not functioning properly when used with a textarea. (If using JavaScript is necessary for a solution, please provide guidance)

How can I adjust the height of a textarea?

*{
    box-sizing: border-box; 
}

.container {
  position: relative;
}

textarea,
input {
  border: none;
  border-bottom: 3px solid #e6e6e6;
  width: 100%;
  height: 50px;
  resize: none;
}

.anim-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background-color: blue;
  -webkit-transition: width .3s;
  transition: width .3s;
}

textarea:focus + .anim-bar,
input:focus + .anim-bar {
  width: 100%;
}
<h1>Works fine on input :)</h1>
<div class="container">
    <input type="text">
    <span class="anim-bar"></span>
</div>

<h1>Cross the container box- textarea :( </h1>
<div class="container">
    <textarea></textarea>
    <span class="anim-bar"></span>
</div>

javascripthtmlcss

Answer №1

Not all browsers display this issue. In my Chrome browser (Windows), it is noticeable.

The line appears under the textarea.

https://i.sstatic.net/OmYsj.jpg

======================================================

I believe the baseline is not consistent.

Baseline inconsistency

The HTML specification does not specify the exact position of the baseline of a textarea, leading to different browsers setting it at varying positions. For certain browsers like Gecko, the baseline is aligned with the first line of the textarea, while in others it may be at the bottom of the box. Avoid using vertical-align: baseline as its behavior can be unpredictable.

Reference:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

    * {
      box-sizing: border-box;
    }

    .container {
      position: relative;
    }

    textarea,
    input {
      border: none;
      border-bottom: 3px solid #e6e6e6;
      width: 100%;
      height: 50px;
      resize: vertical;
      /* see this */
      vertical-align: middle;
    }

    .anim-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background-color: blue;
      -webkit-transition: width .3s;
      transition: width .3s;
    }

    textarea:focus+.anim-bar,
    input:focus+.anim-bar {
      width: 100%;
    }
  <h1>Works fine on input :)</h1>
  <div class="container">
    <input type="text">
    <span class="anim-bar"></span>
  </div>

  <h1>Error on textarea :( </h1>
  <div class="container">
    <textarea></textarea>
    <span class="anim-bar"></span>
  </div>

==================================================

Answer №2

By applying CSS styling to the textarea and using resize: none;, you can prevent the textarea from being resized.

I demonstrated this by incorporating the styling in the CSS section and directly within the HTML code to illustrate both implementation methods.

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}
textarea {
  resize:none; //styling added in the CSS file
}
textarea,
input {
  border: none;
  border-bottom: 3px solid #e6e6e6;
  width: 100%;
  height: 50px;
  resize: vertical;
}

.anim-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background-color: blue;
  -webkit-transition: width .3s;
  transition: width .3s;
}

textarea:focus+.anim-bar,
input:focus+.anim-bar {
  width: 100%;
}
<h1>Works perfectly on input :)</h1>
<div class="container">
  <input type="text">
  <span class="anim-bar"></span>
</div>

<h1>However, error occurs on textarea :( </h1>
<div class="container">
  <textarea style="resize:none;"></textarea> <!--Applying CSS styling inline-->
  <span class="anim-bar"></span>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered an error with ng build --prod while attempting to import a JavaScript file within the app module

Is it possible to import a javascript file into my app module without access to the ts file? import { OtherComponent } from './node_modules/blahblah/OtherComponent.js' While trying to declare this component in @NgModule and running "ng build -- ...

javascriptangularangular6aotng-build

Stable and persistent popup window that remains at the forefront in a Chrome extension

Currently developing a Google Chrome extension and seeking assistance in creating a popup window that remains fixed in one corner while staying on top of all other windows. Here is a reference image for clarification: https://i.stack.imgur.com/IPw7N.jpg ...

javascriptgoogle-chromegoogle-chrome-extensionpopuppopupwindow

The jQuery method .on gathers and retains click events

I created a component that manages a view containing articles with games. In order to prevent memory overload and optimize performance, I implemented a solution where when a user clicks on an article (each having the class "flashgame"), they can choose to ...

javascriptjqueryangular

Verify authentication on a SignalR console application using a JavaScript client

Here is the scenario and solution I am currently working on: In project one, I have a SignalR console application that handles the logic, including authentication using Entity Framework to query the database. In project two, I have an ASP.Net web applicat ...

javascriptc#asp.netangularjssignalr

Searching for MongoDB / Mongoose - Using FindOneById with specific conditions to match the value of an array inside an object nestled within another array

Although the title of this question may be lengthy, I trust you grasp my meaning with an example. This represents my MongoDB structure: { "_id":{ "$oid":"62408e6bec1c0f7a413c093a" }, "visitors":[ { "firstSource":"12 ...

javascripttypescriptmongodbmongoosefindoneandupdate

Simple steps for importing JS files in a web application

Upon examining the code snippet below: const express = require('express'); const app = express(); const http = require('http').Server(app); const io = require('socket.io')(http); const cors = require('cors'); app.u ...

javascriptnode.jsexpress

Restrict certain links from being clickable until the page has finished loading and all click events have been bound using

I developed a modal dialog plugin using jquery, designed to link to the click event of each <a> element with a specific class. This modal dialog uses AJAX to 'fetch' a page declared under the 'href' parameter of the <a> el ...

javascriptjquery

Unique CSS specifically designed for consecutive elements listed in succession

I have a list of notes in a document, but occasionally I may include some document updates (such as "Document closed", "Revision made"...). Here is the basic HTML structure of a document and its notes: <p class="document-note">My note</p> < ...

css

Internet Explorer causing trouble with reliable Ajax dropdown selection

There are two drop-down lists on my website, where the options in one depend on the selection in the other. The Ajax code works perfectly fine in Chrome and Mozilla, but it's not functioning correctly in Internet Explorer (specifically IE9). I need so ...

javascriptajaxinternet-explorerdrop-down-menu

Error message: "In Jade and Express.js, the attribute req.body.[name of form] is not defined

I am encountering an issue while trying to update a database using a drop-down form. The problem is that req.body.[name of form] is coming up as undefined. Upon checking the console, I found that req.body shows up as an empty object {}. Below is the code ...

javascriptnode.jsexpresspugdropdown

Displaying incorrect field names to the user during Angular validation

I've been tasked with implementing validation in my Angular app, and I need to show a popup listing all invalid fields upon form submission. This directive comes straight from my boss, so I have no say in the matter. Currently, I have a method that r ...

javascriptangularjsvalidation

Toggle button to collapse the Bootstrap side bar on larger screens

I am currently utilizing the following template: An issue I am facing is that I want my sidebar to either shrink or hide when a button is clicked, specifically on a 22" PC screen. I have experimented with several solutions without achieving success. Alt ...

jquerycssangularjstwitter-bootstrap

What is the best way to add a background image to a div using react?

My images folder contains 2 images. See the code snippet below from App.js: import "./styles.css"; import nf_logo from "./images/netflix_logo.png"; import nf_bg from "./images/netflix_bg.jpg;; const divStyle = { backgroundImag ...

javascriptreactjs

Let the numerical tally commence once we arrive at said juncture

Our script is designed to count numbers, but the issue arises when the page is refreshed and the number count starts over. We want the count to start only when a user reaches that specific number or point. Css:- .office{padding-right: 5px; padding-left: ...

javascriptjqueryhtmlcss

Guide on accessing and displaying data table values in console.log using Vue.js and vuetify

Hello, I am new to Vue.js and I am trying to work with data tables. I have copied some code from the Vuetify website and I am attempting to call the desserts' names from a sample table using console.log. Below is the code snippet: <template> ...

javascriptvue.jsvuetify.js

The PHP script receives an empty string value passed from JavaScript

I am struggling to pass a string from my JavaScript code to my PHP code. Here is the code snippet that triggers when I hit Enter in a text input: $('#user').keypress(function(e) { if(e.which == 13) { var val = $(this).val(); ...

phpjavascriptjqueryajax

Function triggered twice upon checkbox being selected

Below is the code snippet I am using: $("#cc1").unbind('click').click(function(e) { //somefunction }); This code works perfectly fine for executing a function after clicking the cc1 button. However, when I use the following code: $("#cc1" ...

javascriptjquerybuttoncheckbox

Cutting imagery to create a new design element

https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...

javascripthtmlcss

Issues with the width of Table TD cells not being responsive

I'm having trouble adjusting the width of my dropdown menu columns. I've tried various methods, but can't seem to get each column to be 200px wide as desired. .dropbtn { background-image: url("../sliki/meni.png"); width: 220px; heig ...

htmlcss

What is the best way to remove a MySQL entry with the help of Ajax and Jquery?

Seeking advice on integrating the post title into a jQuery .ajax call. Successfully able to create and display blog posts, now exploring options for adding delete and edit functionality. Currently focusing on delete as it seems more straightforward. Any su ...

javascriptphpjquerymysqlajax