Skip to content

Commit 7b98b67

Browse files
Jeffrey Lauwersclaude
andcommitted
fix(SearchInput): verberg native browser clear-knop
De browser-native × knop van type="search" wordt verborgen via CSS. Een clear-knop wordt later geïmplementeerd als een apart patroon. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 9994ad2 commit 7b98b67

2 files changed

Lines changed: 9 additions & 1 deletion

File tree

packages/components-react/src/SearchInput/SearchInput.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@
3030
padding-inline-start: var(--dsn-search-input-padding-inline-start-with-icon);
3131
}
3232

33+
/* Hide browser-native clear button — will be implemented as a separate pattern */
34+
.dsn-search-input::-webkit-search-cancel-button {
35+
display: none;
36+
}
37+
.dsn-search-input::-webkit-search-decoration {
38+
display: none;
39+
}
40+
3341
/* Width variants on the wrapper */
3442
.dsn-search-input-wrapper--width-xs {
3543
max-inline-size: var(--dsn-form-control-width-xs);

packages/storybook/src/SearchInput.docs.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ De SearchInput component is een gespecialiseerd invoerveld voor zoekfunctionalit
3030
## Accessibility
3131

3232
- Het zoekicoon heeft `aria-hidden="true"` — het is puur decoratief en wordt niet voorgelezen door screen readers.
33-
- `type="search"` biedt op sommige browsers een ingebouwde clear-knop.
33+
- De native browser clear-knop (×) van `type="search"` is verborgen via CSS. Een clear-knop wordt later geïmplementeerd als een apart patroon.
3434
- De extra `padding-inline-start` zorgt ervoor dat ingevoerde tekst nooit over het icoon heen loopt.
3535

3636
## Anatomy

0 commit comments

Comments
 (0)