Very neat! If you have a search bar on your website, you can save a user's searches to local storage and generate a datalist dynamically with JS so that the user can see what they've previously looked for.
Kevin it would be fantastic if you do a video about the differences of *, HTML, and body. I've seen many courses and developers defining all sorts of things in them indifferently like margins and paddings set to 0, Box-sizing, background-colors, scroll-behavior, etc.
Nice one! With the datepicker datalist immediately thought of an idea where you could have an app where you would have dates stored in a DB or Object , iterate over them with JS and inject them into the datalist.
The datalist tag seems really useful in some situations. I will definitely make use of them some time soon. Although, I must add that the native datepickers are one of the frustrating things to work with, specially if you are working with any format other than MM/DD/YYYY. I personally stick with fields and luxon since I have run into timezone issues with the native date pickers (although that probably was more due to my lack of expertise)
Thought there would be a way to style datalists for autocomplete. That would be crazy. I worked with them before but had to move to js because I couldn't style it.
love your videos you are very skilled in CSS , I try to understand js cos people who see a site without will tell you you just don't have the skills for the developers;
Hey Kevin, love what you are doing. You have helped me alot in my journey in web development. However, what's your recommendation for learning more JavaScript? Maybe there is a channel or website that you recommend? Please let me know and thanks in advance.
Form controls are so inconsistent between browsers and an absolute pain to get right to cover accessibility that there's a perfectly valid reason people don't use them directly.
This is amazing, I simply didn't know the existence of data-list. But what about styling? One thing I didn't like too much is the limitation when styling form elements, like a select, for example
Hello, I am from France and for the date suggestions when I click on "others..." the date picker does not show up (I have tried with Brave and Edge), and I have changed the date format which is (dd/mm/yyyy) and it does not work either. I don't know if there is a solution yet. Thanks for the video, it was good anyway.
The datalist does come with a bunch of limitations, though. Unfortunately it's hard to style input type text dropdowns and they don't seem to work very well with intuitive events. You can't have an onchange on the datalist, for example, nor an onclick on the options. Navigating down the list with your keyboard is also hard (if not impossible) to detect, last I checked. But I checked only about a year ago, so things might've changed by now.
And one thing I remember being a pain was that the datalist option has a value attribute that is being displayed when you select it, but the textual value in between the option elements is just shown for the dropdown. I wish the latter would be used to show in the input as a human-readable option, and the value attribute would become the actual value of the input element.
It's not perfect, and for more complex situations JS is definitely better, but for time where you have limited options or limited suggestions that you wan to give, I think it can be a nice solution.
Before clicking on this vedio I though it would be CSS google autocomplete tips. That could make a really interesting video? Like the Wired channel does?
I normally stream every Monday at 10am EST, though I missed this past week. I should be back for the next 2 weeks again though, before taking a break over the holidays.
Bootstrap is built with CSS, so if you learn CSS, you can use Bootstrap without too much of a learning curve, and also use other frameworks as well pretty quickly. Always learn the tech something is built on :D
@@KevinPowell for this, changing and creating components that can be styled. This standard solutions sometimes don't look pretty for all purposes and are not dynamic. Your CSS tutorials are awesome btw, they are helping me a lot.
Most interesting, thank you very much. The Chrome behaviour is just idiotic. Why on earth would anybody want this feature look like a dropdown? This is a gross idea.
I can't believe ANY numeric date format other than ISO continues to persist this far into the 21st century. Why on earth would anyone want to know, immediately and exactly, what date is meant when we can all keep guessing? "OK, is this January 6th 2004, April 1st 2006, June 4th 2001, April 6th 2001,..."
Ah a complicated version of a select menu - but why do you insist of looking for a complicated solution for a simple problem? In the real world a web designer needs to know the choice of the visitor from a fixed set of options.
Very neat! If you have a search bar on your website, you can save a user's searches to local storage and generate a datalist dynamically with JS so that the user can see what they've previously looked for.
Very nice, love that!
I think a `flex: 1 1 0` on the s would align the numbers to the notches. Though the flex-basis of 0 might not be perfect for every case.
As a creator in Blazor I always appreciate the non java stuff you demonstrate. Thankyou for this.
This channel is a must for all Blazor developers!
Kevin it would be fantastic if you do a video about the differences of *, HTML, and body. I've seen many courses and developers defining all sorts of things in them indifferently like margins and paddings set to 0, Box-sizing, background-colors, scroll-behavior, etc.
Kevin is an Css evangelist👾 always the best teacher
Can I hear an A-MEN? :)
Really cool video. Not what i thought at first glance. And that native mixing of datepicker and datalist - it is fantastic
Nice and simple. The datalist can also be populated dynamically. Nice!
Nice one! With the datepicker datalist immediately thought of an idea where you could have an app where you would have dates stored in a DB or Object , iterate over them with JS and inject them into the datalist.
In Firefox you can do a second click or a double-click on the textfield and it shows the dropdown
The datalist tag seems really useful in some situations. I will definitely make use of them some time soon.
Although, I must add that the native datepickers are one of the frustrating things to work with, specially if you are working with any format other than MM/DD/YYYY. I personally stick with fields and luxon since I have run into timezone issues with the native date pickers (although that probably was more due to my lack of expertise)
Not to mention safari doesn’t even support input type=date 😬🔫
This seems very valuable! However, the default Chrome behavior with the instantaneous drop-down and downward-facing arrow is horrible UX.
Gracias!!!
Aprendo mucho con cada video
Saludos desde Colombia!
Awesome, looking forward to playing around with this!
Kevin: "No JS typing suggestions"
My Mind: "NO JS?? This guy gotta be kidding me!"
Thanks Kevin.
Great video! Was anyone else distracted by the two different spellings of favorite? I'm sure which is my favourite though. lol
Man, I learn so much on this channel!
I love that t-shirt, very relatable 🤣
A great video and an awesome suggestion Kevin, thanks so much, keep it up!
Great video! Would you be able to use up/down arrow keys on the datalist drop down or would additional JavaScript need to be implemented? :)
TIL. Thank you, Kevin!
Sweet! didn't know about the datalist 👍
Kevin the CSS boss! Thank you kind sir!
Thought there would be a way to style datalists for autocomplete. That would be crazy. I worked with them before but had to move to js because I couldn't style it.
Yeah, styling form elements is a no-go in a lot of situations.
Your videos are always so helpful
love your videos you are very skilled in CSS , I try to understand js cos people who see a site without will tell you you just don't have the skills for the developers;
Very useful content, thank you sir
wow that date input thing was really cool, but I think more standardisation needs to be done in terms of it value.
Thanks Kevin
Did you say it’s not possible to change the styles on the autocomplete in the first example? Would love to do something like Google serps
Hey Kevin, love what you are doing. You have helped me alot in my journey in web development. However, what's your recommendation for learning more JavaScript? Maybe there is a channel or website that you recommend? Please let me know and thanks in advance.
Dude, you're awesome! This is huge! 👍🏼👍🏼👍🏼👍🏼
Form controls are so inconsistent between browsers and an absolute pain to get right to cover accessibility that there's a perfectly valid reason people don't use them directly.
Amazing. Most on such tricks please. 😁😁😁😁😁
Helpful video kevin 😊,
This is amazing, I simply didn't know the existence of data-list. But what about styling? One thing I didn't like too much is the limitation when styling form elements, like a select, for example
Thank you!
It would be so nice for the range input if you could click on the datalist items and it autmagically adjusted the slider accordingly.
9:22 date didn't change 😉 it seems when you make a datalist you can only choose from the options provided. Right?
Brilliant!!!
Amazinggg 👌👍
How do I change the style of a data list?
How do I add a link for each option sir?
kevin its awesome how i can add image to options and style them the way i like them
Where did you buy the awesome t shirt
Hello, I am from France and for the date suggestions when I click on "others..." the date picker does not show up (I have tried with Brave and Edge), and I have changed the date format which is (dd/mm/yyyy) and it does not work either. I don't know if there is a solution yet. Thanks for the video, it was good anyway.
It seems that these two browsers both use chromium. I will try to let them know.
In Firefox, the datalist (with date input) does not work at all.
The datalist does come with a bunch of limitations, though. Unfortunately it's hard to style input type text dropdowns and they don't seem to work very well with intuitive events. You can't have an onchange on the datalist, for example, nor an onclick on the options. Navigating down the list with your keyboard is also hard (if not impossible) to detect, last I checked. But I checked only about a year ago, so things might've changed by now.
And one thing I remember being a pain was that the datalist option has a value attribute that is being displayed when you select it, but the textual value in between the option elements is just shown for the dropdown. I wish the latter would be used to show in the input as a human-readable option, and the value attribute would become the actual value of the input element.
It's not perfect, and for more complex situations JS is definitely better, but for time where you have limited options or limited suggestions that you wan to give, I think it can be a nice solution.
Before clicking on this vedio I though it would be CSS google autocomplete tips. That could make a really interesting video? Like the Wired channel does?
Cool! Why does your address bar say astro.build?
Kevin, this is magic outside of Hogwarts! Thx very much!
Cool video, like
Oh this was fun
FYI, Kevin your music background is a bit load, especially early on.
Oh Great. Thanks you brow
very helpful
apple flavored ice cream is very popular these days.
I use JavaScript generated datalists
Love your video sir.....
hello Kevin can you tell me when will you stream on twitch ??
I normally stream every Monday at 10am EST, though I missed this past week. I should be back for the next 2 weeks again though, before taking a break over the holidays.
Should I dive deep into CSS or into bootstrap sir?
Bootstrap is built with CSS, so if you learn CSS, you can use Bootstrap without too much of a learning curve, and also use other frameworks as well pretty quickly. Always learn the tech something is built on :D
@@KevinPowell thank you sir your online student from Myanmar !!!
Is this possible with input with password type?
I hope not 😂
Will we ever get styles for forms?
We do have accent-color now, which is a nice first step, and I've heard some rumblings on a few other things that might be in the works.
Could you make one tutorial using Javascript? :)
For this, or just in general? I use JS when needed for certain things, but granted, for the type of content I have here, that's not too often :)
@@KevinPowell for this, changing and creating components that can be styled. This standard solutions sometimes don't look pretty for all purposes and are not dynamic. Your CSS tutorials are awesome btw, they are helping me a lot.
Hey Kevin. Thanks for another muster piece. Please use little javascript on your tutorials so that we can learn the use of it.
I do, when it's needed for what I'm looking at... which isn't very often, lol. But if I need some, I'll use it :)
hi your fan from egypt... could you make a react js course?
I'm not the right person, I only have a passing knowledge of React :)
Most interesting, thank you very much. The Chrome behaviour is just idiotic. Why on earth would anybody want this feature look like a dropdown? This is a gross idea.
Anda boleh memilih untuk salah satu daripada hadiah di atas
Это было круто и неожиданно
I can't believe ANY numeric date format other than ISO continues to persist this far into the 21st century. Why on earth would anyone want to know, immediately and exactly, what date is meant when we can all keep guessing?
"OK, is this January 6th 2004, April 1st 2006, June 4th 2001, April 6th 2001,..."
Nice one but thumbnail is kinda misleading.
Some times Sir Kevin knows more about the language usage and tools than the makers...lol
1st view! Just love your videos🤩
Ah a complicated version of a select menu - but why do you insist of looking for a complicated solution for a simple problem? In the real world a web designer needs to know the choice of the visitor from a fixed set of options.