open-ui icon indicating copy to clipboard operation
open-ui copied to clipboard

`<input type="search">` provides a clear button "X" that can't be customized

Open argyleink opened this issue 2 years ago • 6 comments
trafficstars

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)

argyleink avatar Oct 10 '23 18:10 argyleink

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.

lukewarlow avatar Oct 10 '23 18:10 lukewarlow

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.

github-actions[bot] avatar Apr 08 '24 00:04 github-actions[bot]

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.

lukewarlow avatar Apr 08 '24 11:04 lukewarlow

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

scottaohara avatar Apr 08 '24 12:04 scottaohara

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.

lukewarlow avatar Apr 08 '24 12:04 lukewarlow

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.

github-actions[bot] avatar Oct 06 '24 00:10 github-actions[bot]

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.

github-actions[bot] avatar Apr 05 '25 00:04 github-actions[bot]

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?

lukewarlow avatar May 11 '25 09:05 lukewarlow