CSS only datetime-local input UI to choose date and time. Is possible?n
Hello everyone! So, is it possible to style and get a good UX/UI to a
datetime-local type input with just CSS? Or do I need javascript? If so, what do you recommend? Thanks a lot!8 Replies
Can you clarify what styles you want to apply to the input? You can get a long way just by adding your font-family or a
font: inherit; to the inputs. to overhaul the styles you'll need to start with appearance: none; like when rebuilding most inputs. But you can style the font, padding, border, border-radius etc without that which can go a long way in making the input look nice. just depends what you mean and what youre end goal of how you want it to appear.Sorry, I wasn't very clear. I mean styling the user interface to choose the date and time, which is different in each browser. Thanks.
I've updated the description to be more precise...
Form controls are hard to style and there are very limited options to do so. I doubt you'd be able to
There are a million different date and time pickers online for you to use though
The calendar date and tine picker then , not the input itself ? You can’t touch it as far weas I know. You would have to rebuild your own elements and add in the functionality . Time picker would be simpler then calendar but both are very challenging.
Like Jochem said, looking into third party libraries would be your best bet. You can experiment in codePen easily by searching for cdns like flatpickr; load the JavaScript and css and then you can customize the colours fonts etc.
Like Jochem said, looking into third party libraries would be your best bet. You can experiment in codePen easily by searching for cdns like flatpickr; load the JavaScript and css and then you can customize the colours fonts etc.
Thanks for your answers! I hoped it was possible to do with only CSS, nowadays...
It is, just not on ancient browsers, and that won't change kinda by definition
Well, in my case I can ignore ancient browsers...
sorry, that was a complete mis-chan, that was meant for a question about
:has
afaik there's nothing you can do to style the datepicker component at all
short of rebuilding it entirely