Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

We're getting closer 🤏 input, textarea { field-sizing: content; } Auto-resizing text inputs with one line of CSS 🚀

jhey ʕ•ᴥ•ʔ

146,233 subscribers

207,921 views • 2 years ago •via X (Twitter)

Education Arts Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Pacorro2 years ago

that border thing detail

Kaspar Püüding2 years ago

Wow, only multi-line truncation left and the web is perfect?

Jon Sutherland2 years ago

Will max height work for it to then scroll?

jhey ▲🐻🎈2 years ago

Yep – You can constrain it with a max number of lines and then set up the scrollbar for it 🤙

Kyle TechSquidTV2 years ago

That's magic.

Christian Williams2 years ago

much needed, I have wrote this a million types in js

Justin2 years ago

I need this now

Jikku Jose2 years ago

I was thinking it requires JS!

Bug Buster 🐞 CLONE2 years ago

How did you create that border effect, @jh3yy ?

Bug Buster 🐞 CLONE2 years ago

Do you have a YouTube channel?

Related Videos

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

Future CSS Tip! 🚀 You can create auto-resizing text inputs with one line of CSS 🔥 textarea, input { field-sizing: content; } No more JavaScript to sync a textarea height to fit the content 🫶 Perfect for chat, messaging, comments, etc. 💬 The size of your input will grow to fit your content. If you want to constrain the size, do something like this: textarea { field-sizing: content; min-height: 2lh; /* Use the line-height unit 😎*/ max-height: 10lh; } Love the fact you could use this for auto-resizing in both directions too! 🙌 Want a search field that expands horizontally? Do it! Love these one-liners that bring incredible value to the platform like this 💙 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

319,170 views • 2 years ago

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

auto-growing <textarea> without JavaScript! CSS is getting field-sizing: content; to size inputs by their contents. Dropped in Chrome Canary today, demo here:

Wes Bos

203,517 views • 2 years ago

TIL about `field-sizing: content` in css

TIL about `field-sizing: content` in css

Jonnie Hallman

150,898 views • 1 year ago

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

¡POR FIN se puede hacer esto con CSS! Cambiar el tamaño de un textarea según su contenido. Es la nueva propiedad "field-sizing: content" Soporte del 72% en navegadores. Mira la demo:

Miguel Ángel Durán

111,424 views • 10 months ago

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Fit width text in 1 line of CSS `text-grow: per-line scale;` (prototype in Canary 165+)

Adam Argyle

92,826 views • 6 months ago

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

dissolving text input with SVG noise + CSS filter, displace + mask duplicate layer whilst clipping the original 🤙 check the exploded view 👇

jhey ʕ•ᴥ•ʔ

43,591 views • 1 year ago

very cool – scale text to fit width w/ 1 line of css 🧑‍🍳 a { text-grow: per-line/consistent scale; } great for link blocks, hero text, etc. [flagged in Chrome ⛳]

very cool – scale text to fit width w/ 1 line of css 🧑‍🍳 a { text-grow: per-line/consistent scale; } great for link blocks, hero text, etc. [flagged in Chrome ⛳]

jhey ʕ•ᴥ•ʔ

51,106 views • 6 months ago

🔥 3 CSS tips for styling <textarea> you probably didn't know about

🔥 3 CSS tips for styling <textarea> you probably didn't know about

Wes Bos

111,616 views • 2 years ago

We're getting closer to launch day. Be first in line for Ethereum's first Supermarket 👀

We're getting closer to launch day. Be first in line for Ethereum's first Supermarket 👀

Superseed

17,878,804 views • 3 months ago

GLM-4.6V can accept multimodal inputs of various types and automatically generate high-quality, structured image-text interleaved content.

GLM-4.6V can accept multimodal inputs of various types and automatically generate high-quality, structured image-text interleaved content.

Z.ai

13,655 views • 6 months ago

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

CSS only animated exclusive accordion update 🚀 details { interpolate-size: allow-keywords; } ::details-content { transition: content-visibility, height; transition-behavior: allow-discrete; } [open]::details-content { height: auto; }

jhey ʕ•ᴥ•ʔ

51,127 views • 1 year ago

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

🔥 CSS Tip! Have you ever wanted the benefits of a block element but the sizing of an inline element? width: max-content; comes in super handy here 👌

Wes Bos

23,420 views • 1 year ago

messin' with text using CSS + SVG 🤌

messin' with text using CSS + SVG 🤌

jhey ʕ•ᴥ•ʔ

85,634 views • 1 year ago

✨We're getting closer and closer! #BlueProtocolStarResonance #StarResonance #BPSR

✨We're getting closer and closer! #BlueProtocolStarResonance #StarResonance #BPSR

Star Resonance Database

19,515 views • 11 months ago

we're getting closer inches away..

we're getting closer inches away..

🥯

15,994 views • 2 years ago

We're getting closer to a Mario Kart with 101 players... #nintendo #mariokartworld

We're getting closer to a Mario Kart with 101 players... #nintendo #mariokartworld

Hat-Loving Gamer

24,521 views • 1 year ago

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

111,954 views • 1 year ago

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

works great on blocks of text too 🤙 .text { --duration: calc(var(--text-length) * 0.12s); animation: shimmer var(--duration) infinite; } @keyframes shimmer { 0% { background-position: 100% 0; } } animation-duration maps to the text length using CSS custom properties 🚀

jhey ʕ•ᴥ•ʔ

100,165 views • 1 year ago

One step closer. 🚀🚀🚀🚀🚀🚀🚀🚀

One step closer. 🚀🚀🚀🚀🚀🚀🚀🚀

Mark Federschmidt

32,762 views • 2 months ago

Bark Text-to-Audio Model Full Text Input: "Why was six afraid of seven?" Ignore Bark's "I'm done with this input" token and tell Bark to just keep generating more audio anyway.

Bark Text-to-Audio Model Full Text Input: "Why was six afraid of seven?" Ignore Bark's "I'm done with this input" token and tell Bark to just keep generating more audio anyway.

Jonathan Fly 👾

461,799 views • 3 years ago