Skip to content

v2: Broken Search Form #736

Description

@dday9

Describe the issue

When a form element has the search role, it stacks children horizontally and brings a special style, consistent with the search input. Adding a hidden element breaks the styling.

Current Behavior

To replicate, take the current example on the website but prepend a hidden input at the top of the form:

<form role="search">
  <input name="site" type="hidden">
  <input name="search" type="search" placeholder="Search" />
  <input type="submit" value="Search" />
</form>

This causes the left-side of the input to be flat instead of rounded.

Screenshot of broken PicoCSS search form

Expected Behavior

Ideally, the style should ignore hidden elements, both with the hidden attribute and the hidden input type. This would allow the left-side of the search input to remain rounded, regardless of if there is a hidden element before it.

Reproduction URL

JSFiddle: https://jsfiddle.net/7tpmxbk6/

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions