Discord Made The Coolest CSS Only Input Animation

The search input in Discord seems simple at first, but as I was working on duplicating it I realized it was much more complex than it first appeared. In this video I will go over exactly how to create the Discord search input and all of its animations using only CSS.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
01:07 - Starting Code
02:06 - Growing Width Animation
07:34 - Search/Close Icon Animation

#DiscordClone #WDS #CSS

[waleedbinalim]

Project lead: iT's jUsT aN iNpuT, wHy wOuLd yOu nEeD mOrE tHaN a MiNuTe fOr tHe TaSk?
Developers:

[tekz]

The last time I really worked with CSS was more than 10 years ago, it's really amazing to see that css can easily replace almost 90% of javascript ui code

[MrZerosixZeroone]

wow, finaly someone discovered that you can target the focus state of an input 👏👏👏

[Tarabass]

Love this. Way better then "Stop this" or "stop that" video's :)

[arkemiffo]

I've used the placeholder-shown quite a long time now for my inputs. I use an empty space as the placeholder, and then a the label is being positioned inside the input as the placeholder. This allows me to keep the label visible when there's text in the input, but usually minimised to a much smaller font-size and moved to the top:0px of the input. That way you always have the name of the input shown, but when used, it's being moved off to the side with a transition, and you keep the accessibility automatically as you're using the label. Besides I think it looks great (in most cases anyway...)

[sokzpieprzu]

Right as I'm watching this, my discord search bar got split up into two rows and has no background. Well done Discord!

[donniedamato]

I'd avoid using positioning to place the elements where possible in favor of grid placement instead. Positioning introduces stacking contexts where elements might appear on top of each other in unexpected ways. Additionally, I'd use font relative units for icons so they scale with the text it is associated with. This would mean using `em` instead of `rem` for the size.

[clevermissfox]

Have been using this kind of pattern a lot with inputs in the last year. I mostly use the input-wrapper, the input inside, then pseudo element with a bg image of the icon, or the input + button > icon . And use grid or flex on the wrapper.

I love the placeholder shown pseudo class, then I use the :has(input:focus) to put the outline around the wrapper (not sure why he turned off the outline just to use a box shadow though; the outline doesn’t take up space either). If it’s an icon not a button, then I use :focus-within.

Then I can animate the width of input or flex-grow on the wrapper. :has(input:focus) outline then highlights the wrapper when the input is focused but still highlight the focus ring on the button when it’s focused. Also some fun timing functions to transition that width!

I love css, and all the selectors and pseudo classes we have. There are so many ways to approach the same result !! Love a css video!

[pierwszywolnynick]

this gets complicated really fast. I can just imagine how it looks like for someone who's not tracking css changes for a while

[itsfolf]

Your version is actually better than Discord's, theirs is all javascript

[danielassayag]

congrats, you kept both pace and clarity, this is impressive, ill really think of following your course.

[vinayakporwal]

that descrete property is something i have never read about in last 3 years of my learning damn 😮

[WePiphany]

Outline should be used instead of box shadow. Outline does not take up space.

[luca.pettinato]

I like the video and modern CSS, as always Kyle is spot on! 👌🏻 Thank you!

[AntonYefremov]

Great video, thank you!

Though It still would be nice to see how the x-button could be wired to clear the input without JavaScript

[kipchickensout]

wait.. I don't do webdev and even I knew that
title baited me ngl

[avi]

12:08 But is it hidden from the accessibility tree as well?

[clevermissfox]

What is the keyboard shortcut to hop to the end of the “word” you’re on, not the whole line ?

Eg at 16:14 when he is adding the :not() and jumps the cursor to the end of ”placeholder”, then one more jump to the end of “shown”?

[srdjagunjic]

OMG Firefox finally supports :has!
Last year I wrote bunch of CSS to handle all sorts of things in a form using :has many times, only to get a feedback that it does not work on Firefox... I forgot to check before going that route.
To fix it, I had to write JS that I was not really looking forward as I always prefer CSS based solutions.
Now I see they finally support it since December last year.

Interesting how you added support for IE but IE does not support :has which means that the main animation won't even work

[braoha]

Really cool examples of css features that were completely new to me! Now while you can do a lot of cool things with just complex CSS-selectors, the readability is just awful when you put a bunch of them together like that.. so sticking to js and toggling classes with proper names is still the way to go IMO. But awesome showcase of what can be done with just CSS and HTML alone!