File and search inputs

input[type="file"]

<input type="file"> and <input type="search"> are styled as they are. The file input's own button takes the button fill; the search input takes the pill corner.

Basic

Import config Search the log

html

<article data-tone="card" style="display:grid;gap:1rem">
  <label data-field><span>Import config</span><input type="file"></label>
  <label data-field><span>Search the log</span><input type="search" placeholder="guide/old"></label>
</article>

The file input shows the chosen file name beside its button, which is the browser's own text.

Notes

::file-selector-button takes --s72-btn and its -fg, so it matches a real button.
A search input is rounded by --s72-radius-pill, which is 0 until you set it yourself.
Add data-filter="#id" to a search input to hide rows in a table or items in a list as you type; see Filter.