Jen SimmonsDear web designers and developers who write CSS,
Is there anything you wish you could do to style a `<button>` or `<input type=button>` that you cannot easily do today in CSS???
Julian Kussman@jensimmons sort of circuitous, but, a better way to reset/unstyle all elements at once without boilerplate
@jkuss I don't think I understand what you mean.
Matthias K@jkuss @jensimmons Making <a> links look like buttons and <button> elements like links is more painful than it should be. I sometimes choose the semantically incorrect element because the necessary styles (padding, line height etc) are too annoying to tweak.
Florian Reuschel@loilo Interesting, this seems to work quite well!
Dan@loilo @matthiask @jkuss @jensimmons
It does. It pains me that the wrong element is being used. đŞ
It does. It pains me that the wrong element is being used. đŞ
@jensimmons clearing all default styling/behavior to start from scratch. No margins on body, plain text for buttons, etc.
knack@jkuss @jensimmons virtually every web project I have seen in 18 years has used a reset stylesheet, but I donât think of it as a pain point anymore- just one more thing you do at the start of the work.
s427²
Jonathan Fischer@jensimmons Gradient borders so that I can make them look like pre-Yosemite versions of Mac OS X.
Jay Contonio@jensimmons a âsubmittingâ pseudo class when the button belongs to a form. I shouldnât need JavaScript to manage this.
mb21@jcontonio @jensimmons First I liked the idea, but if your form submission results in a new page load (like it will unless you .preventDefault() it with JS), then isnât the browser page loading indicators enough?
Egor Kloos@jensimmons For me itâs mainly the inconsistency across browsers when focussing. And recently Iâm mostly working with shadow dom which just adds to the mess.
Styling buttons with system colours could also do with a bit of sprucing up.
Styling buttons with system colours could also do with a bit of sprucing up.
@dutchcelt > Styling buttons with system colours
Which part of the button would you like to see colored?
@jensimmons Just the three button values: ButtonText, ButtonFace, and ButtonBorder.
I think ButtonFace is a touch dark and ButtonBorder too similar with canvas. I like the recent improvement with link and visited, so hopefully we can see improvement across all system colors.
For now I have to replace some of them with my own values.
@jensimmons Also, I keep meaning to make a list of the system colours of what works and in which browser. Sounds like a little weekend project đ
Sara Joy 
@dutchcelt @jensimmons ooh yes let me know if you do this!
I find there are even inconsistencies between the desktop and mobile browsers of the same kind - desktop chrome/edge's system colours really are terrible in dark mode, but mobile they seem fine đ¤ˇ
Paul Shryock@dutchcelt @jensimmons I dream of a day when I can use system colors reliably and they "just work" in all browsers the way they're supposed to.
Chris Silverman đť@jensimmons There have been a few times where I wished I was able to apply :before and :after pseudos to `<input type=button>`. I don't encounter this as much anymore, since `<button>` seems to be the more common usage, but sometimes I do find myself in a situation where I can't change the markup and I want to put a :before/after on an input-type button.
Niklas@jensimmons `border-image` works ok for using an image or gradient on the border only, but it does not work well together with border radius. So I do hacky pseudo element stuff to achieve that. A better solution could be something like `background-clip: border`.
keithamus@jensimmons most design systems seem to add a leading/trailing icon in their buttons. Itâs not impossible (add an img tag) but the comparative development experience lacks. I wonder if thereâs improvements to be made here?
Ben Delarre@jensimmons `<button is="my-button">Reset</button>`
Konnor Rogers@bendelarre @jensimmons đ đ đ
David W. Keith [dwk]@jensimmons more warnings when my styles arenât accessible, ideally with links to documentation to show the team.
Kenneth@jensimmons I know itâs not really css, but Iâd love to nest a button in a button without being shouted at by linters.
Eric Eggert@kpk @jensimmons Youâre gonna be shouted at by your fellow accessibility testers then instead. đ Friends donât let friends nest interactive elements.
@yatil @jensimmons yes! I would like a11y tools to be able to handle it, because we do it all the time anyway. Canât speak for threads, but I know web tweets are clickable elements with buttons in. Itâs a very common need.
@kpk @jensimmons But this has nothing to do with a11y tools handling it. Even if they did, interactive elements in interactive elements are a terrible experience for most users. Activating cards while trying to scroll is quite an annoyance.
@yatil @jensimmons I always assumed it was the a11y tooling that made things difficult and so led to the advice against. Perhaps I am wrong on that. While Iâm sure there are many places it can be a bad experience I think there are also many common experiences where it is not, so the guidance should allow for that context. Anyway, it is not really CSS-related - i apologise for the diversion.
Jak2k đłď¸âđ
Jamie Boyd@jensimmons before/after pseudo elements not being available on <input type=submit > is often a headache, particularly when dealing with CMS/3rd Party-mandated forms where <button>s arenât available.
westbrook@jensimmons I wish I could style the <button> INSIDE of an <input type=file> the same why I style all my other <button>s.
Yea the ::file-selector-button pseudo element feels so awkward
James@konnorrogers @westbrook @jensimmons It was interesting to see `::file-selector-button` as the only existing "part-like pseudo-element" (essentially "real" elements in every way except being a "real" element) besides `::before` and `::after`. It points to it being
an outlier for sure.
(`::details-content` coming soon as well as a part-like pseudo element)
https://drafts.csswg.org/css-pseudo-4/#part-like-pseudo-elements
claas@jensimmons ripple effect like on Android
theAdhocracy@jensimmons This isn't specific to button elements, but it comes up most frequently with them: being able to set `outline` on only some sides. I'm hesitant for that to exist for accessibility reasons, but it would definitely be useful!
(Why not use border? Offset and the fact that outline doesn't change the rendered position of the element, both important.)
Also, others have already mentioned, but pseudo elements on inputs would be great!
Tryggvi Gylfason@jensimmons I wish :active styles were cleaned up onDrop. Need js to do it properly now
Tyler Sticka@jensimmons Iâd still like better methods for reclaiming interactive area from border radii: https://cloudfour.com/thinks/jagged-little-pill-issues-with-rounded-buttons/
@jensimmons would love if there was a way to enable haptic feedback (like the experimental switch input!)
Timothy Leverett@jensimmons "oreo" borders/outlines to guarantee contrast against backgrounds of varying colors.
@jensimmons also partial borders are a pain to implement and require SVG, or a boatload of linear gradients.
cmmdmxhonestly, I can't think about something I'd want to do and can't do with a button in recent browsers with CSS. Maybe a better integration of a "pressed" state would be nice, but it's also totally doable today with aria.
But there would be some things I can imagine of with Text Inputs đ Or even better: proper styling of Select/Option and datalist.
@jensimmons ripple effects
@jensimmons I think line-height and padding works differently between buttons and links. That is annoying.
Olliew@jensimmons mostly I think itâs totally fine but it would be kinda nice to have a default loading spinner available to display within a button and maybe elsewhere
eurozerozero@jensimmons I know this is an old-ish post, but...
Along these lines, itâd be magical if <select> had a keyword that enabled filtering behaviour, so a person could click the <select> and start typing to filter the <options> to just those that contained what had been typed.
e.g. With this <select> on the Interop 2024 page, I could start typing âscrollâ and it would filter the <options> to just those containing âscrollâ.
(itâd be pretty cool if another keyword allowed a new value to be entered)
