Search form customize styling

Trevor

#243765

In search boxes, you will initially see the ‘placeholder’ text it disappears when you start typing, and the actual search term(s) you type.

For accessibility reasons, the placeholder is always faded (opacity is less than 1).

Which do you wish to change?

As to the corner ‘spots’, it is caused by this custom CSS you have:

https://www.screencast.com/t/N1YQvTHwDC

Take the background color out and instead do this:

.searchandfilter > ul > li label {
    background-color: blue;
}
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
    background-color: #fff;
}

Anonymous

#243777

Yes if it’s possible change opacity.

Where background-color is blu, I don’t have “spots” problem anymore.

I still have “spots” problem where background-color is beige:

https://www.virusfree-europa.com/

https://www.virusfree-europa.com/strutture/

https://www.virusfree-europa.com/strutture/risultati-ricerca/

Maybe create a custom code for a css-id, can fix that?

Trevor

#243785

Ah, you would have to change the background color to beige in those cases. Add a class the Elementor row that has blue or beige so you can use those, e.g.

beige-form-bg

blue-form-bg

and then the css is:

blue-form-bg .searchandfilter > ul > li label {
    background-color: blue;
}
beige-form-bg .searchandfilter > ul > li label {
    background-color: #f5f5dc;
}
.searchandfilter > ul > li input,
.searchandfilter > ul > li label select {
    background-color: #fff;
}

Anonymous

#243787

Perfect! Thank you. Now it’s possible change opacity text of search item?

Trevor

#243790

The opacity of the placeholder is set by the user’s browser, so that you have little control over.

Anonymous

#243820

Ok no problem. Thank you.

Trevor

#243822

Is it OK to close this thread for now?

Anonymous

#243848

Yes

[Author]

Posts