Customize color for Search box items

[Noz]

Hi,

Have tried to find how to modify selector and text color (black at the time being) + background color of fields (white instead of custom at the time beeing) under form-search. Tried with Firebug + CSS, but no result.

Can you help please ?

Thanks !

[SQadmin]

Customize your own in quick css:

.form-search.custom div.custom.dropdown ul { background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95);border: 1px solid #B7F0FF;}

.form-search.custom div.custom.dropdown ul li.selected {
background: none repeat scroll 0 0 #B9F0FF;
color: black;
}

.form-search.custom div.custom.dropdown ul li {
color: #333;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Noz]

Will try : warmest thanks ! 🙂

GREAT support.

[Noz]

WORKS ! 🙂 Custom CSS to use to customize search fields (default, hover) :

.form-search.custom div.custom.dropdown ul { background: none repeat scroll 0 0 #HEXACODE1;border: 1px solid #HEXACODE2;}

.form-search.custom div.custom.dropdown ul li:hover {
color: #HEXACODE3;
background: none repeat scroll 0 0 #HEXACODE2;
}

.form-search.custom div.custom.dropdown ul li {
color: #HEXACODE3;
}

***************

Problem remaining with :

1/ Search fields are empty (there are datas when you click, but nothing is seen before you click), even when default value is defined. When selecting, there is a blue field BEFORE first item : how can I get rid of that blue empty line ? I would like my default value to be seen in the field search before you click to select.

e.g. Age 18 – 75
instead of Age –

2/ Seletor hover is still black when I try to customize it. I would like it to be :

– white (default : this is ok)
– my custom color when mouse goes over

Thanks

[SQadmin]

Hi,
Default values are not implemented yet but I am finishing them today

For hover edit this:

.form-search.custom div.custom.dropdown ul li:hover {
background-color: #333333;
color: black;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Noz]

Ok, thanks.

What about the little triangle on the right of the search field ?

It is set to white, but comes to back on hover.
Have search with Firebug, but can’t find how to custom hover color (instead of black).

[SQadmin]

You can see the hover by setting it on the style section: http://d.pr/i/5l81

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Noz]

Sorry, but I don’t understand what you mean… Where exactly should I set this ?

[SQadmin]

Hi,
I was showing you how to use Firebug to see the styles when on hover.
I will give you the style if you can’t find it:

COPY CODE

form.custom div.custom.dropdown:hover a.selector:after, form.custom div.custom.dropdown.open a.selector:after
{
border-color: #222 transparent transparent;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Noz]

It works, thanks ! 🙂

[Author]

Posts