search

CloudCannon / pagefind

Static low-bandwidth search at scale
https://pagefind.app
MIT License
3.45k stars 111 forks source link

How to change placeholder opacity? #553

Closed nikhilweee closed 8 months ago

nikhilweee commented 8 months ago

Since the placeholder is hidden behind a shadow root, is there a way to apply custom CSS to the search input placeholder?

nikhilweee commented 8 months ago

Turns out I can do this if I use !important, but is there any other way?

input::placeholder {
  opacity: 0.5 !important;
}
bglw commented 8 months ago

If you scope it tighter it will override Pagefind's style. e.g. something like

.your-body-class .pagefind-ui__search-input::placeholder {
  opacity: 0.5;
}

Where .your-body-class is some classname you already have on your page.

Should take precedence over Pagefind's selector. .pagefind-ui__search-input is the classname you want to target 🙂