search

picocss / pico

Minimal CSS Framework for semantic HTML
https://picocss.com
MIT License
13.82k stars 406 forks source link

Outline shows when input type="search" is grouped with button #571

Open frodik opened 4 months ago

frodik commented 4 months ago

Please search for duplicate or closed issues first.

Describe the issue

Current Behavior

When is grouped together with button there is an ugly outline showing around input on the side where the button is not. The corners are rounded, but focused outline is more rectangular than the side of the input

Expected Behavior

grouped with button should behave the same as standalone input when focused

Reproduction URL

https://codepen.io/Frodik/pen/NWVQWjK

Environment

Chrome

Sector6759 commented 4 months ago

Not sure what your goal is. Do you want to have the button also be round, or do you want the whole group (search input and button) to be rectangular?

If your goal is to achive the former, you need to use <fieldset role="search"> instead of <fieldset role="group">. (docs)

If you want the latter, I am not sure if this is possible, as search inputs are intentionally rounded. (docs)