Styling

Themes

InfiSearch provides 3 built-in themes by default, which correspond to the 3 stylesheets in the releases.

These 3 stylesheets also expose a wide range of css variables which you can alter as needed.

Head on over to the demo site here to try them out!

Light

CDN link

<!-- Replace "v0.10.1" as appropriate -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ang-zeyu/infisearch@v0.10.1/packages/search-ui/dist/search-ui-light.css" />

Preview

Basic

CDN link

<!-- Replace "v0.10.1" as appropriate -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ang-zeyu/infisearch@v0.10.1/packages/search-ui/dist/search-ui-basic.css" />

Dark

CDN link

<!-- Replace "v0.10.1" as appropriate -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ang-zeyu/infisearch@v0.10.1/packages/search-ui/dist/search-ui-dark.css" />

Preview

Styling the Fullscreen UI Input Button

InfiSearch is minimally invasive in styling your <input> element (except for the one that comes with the fullscreen UI), leaving this to your site’s design.

Notably however, for accessibility, some minimal styling is applied when using the fullscreen UI to convey the intention of a button (which opens the fullscreen UI). This is limited to:

• A background & box-shadow & color application on focus

  These are applied with a !important modifier as they are key to conveying keyboard focus, but are also overridable easily with InfiSearch’s css variables.

• cursor: pointer application on hover

Applying Input Button Styles under mode='auto'

If using the default UI mode of auto, which switches between the dropdown and fullscreen UI dynamically, you can also set a different placeholder, and/or use the .infi-button-input selector to apply your styles only if the fullscreen UI is used. For example,

.infi-button-input:focus:not(:hover) {
    background: #6c757d !important;
}