open-ui
open-ui copied to clipboard
`<input type="search">` provides a clear button "X" that can't be customized
see https://codepen.io/argyleink/pen/VwqgRjX (type in something and see the X show up)
there's also accent-color to consider, see this demo https://codepen.io/argyleink/pen/qBRwjZm
I'd like to see standardization around this clear button, allowing basic styling and positioning (as well as hit area improving, cuz it can suck to try and tap with an adult finger)
I agree this would be a big win. I'm working on pushing research for search soon based on my research into browsers pseudos. There's also the magnifying glass that some browsers add to the search input too.
This along with <input type="number"> controls would be a big win.
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
Now I want to make sure we don't fall in the trap of letting invokers solve problems we should be fixing in CSS, that being said I wonder if a clear action would fit into the invokers paradigm so you can just make your own styled button? And hide the existing one with CSS?
Just a thought. I do want to solve the input number and search properly though.
definitely would rather authors could do more with CSS for this 'button', rather than having to create a whole separate button and understand the nuance of making a button that is not generally expected to be overtly exposed to users (AT or keyboard in general) now have reasonable a11y-ux.
edit: and i even wrote a bit about those nuances 2 years ago - https://www.scottohara.me/blog/2022/02/19/custom-clear-buttons.html
Do you happen to have a similar post about steppers for number input. I'd love to understand the accessibility implications. So far all I can find is that you should probably put tabindex=-1.
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
Per https://drafts.csswg.org/css-forms-1/#selectordef-clear-icon (needs further speccing but it's a start) and the recent decision to add a reset/clear command to the future invokers list I think this is addressed?