XF 1.2 How to change color of search space

[billybatz9]

How do i change the color of the search space? Ive attached an image

 

[Shelley]

Adding the following in EXTRA.CSS will change that.

#QuickSearch .textCtrl {background-color: red;}

 

[Amaury]

Adding the following in EXTRA.CSS will change that.

#QuickSearch .textCtrl {background-color: red;}

Actually, just edit @textCtrlBackground in the color palette.

 

[Jeremy]

That will change it everywhere, Amaury. @Shelley's solution changes exactly what was requested and nothing else.

 

[billybatz9]

@Shelley thank you. It worked
@Amaury thank you. But it changed a lot more things as well. But it did change the color. You are right.

Last thing. How do you change the color of the letters "search" in the box?

 

[Shelley]

@Shelley thank you. It worked
@Amaury thank you. But it changed a lot more things as well. But it did change the color. You are right.

Last thing. How do you change the color of the letters "search" in the box?

just add in color: red; inside the code i posted. Changing the colour to your preference.

Edit: sorry my mistake don't add that in.

 

[Amaury]

Last thing. How do you change the color of the letters "search" in the box?

@textCtrlText, but that will change it everywhere like the background.

Do you want to change the placeholder or input text?

 

[Jeremy]

Looks like you need to use Pseudo-classnames to style the place holder text:
http://css-tricks.com/snippets/css/style-placeholder-text/

 

[Amaury]

Looks like you need to use Pseudo-classnames to style the place holder text:
http://css-tricks.com/snippets/css/style-placeholder-text/

Thanks for posting this, because I just realized I used the wrong word. I had placement and not placeholder.

 

[billybatz9]

Looks like you need to use Pseudo-classnames to style the place holder text:
http://css-tricks.com/snippets/css/style-placeholder-text/

I copied and pasted the codes in the extra css but it didnt work.

I just want to change the color of the "search..."

 

[Shelley]

I copied and pasted the codes in the extra css but it didnt work.

I just want to change the color of the "search..."

Try the following.

#QuickSearch .textCtrl::-webkit-input-placeholder {
  color: green;
}


#QuickSearch .textCtrl:-moz-placeholder { /* Firefox 18- */
  color: green;  
}

#QuickSearch .textCtrl::-moz-placeholder {  /* Firefox 19+ */
  color: green;  
}


#QuickSearch .textCtrl:-ms-input-placeholder {  
  color: green;  
}

 

[billybatz9]

Try the following.

#QuickSearch .textCtrl::-webkit-input-placeholder {
  color: green;
}


#QuickSearch .textCtrl:-moz-placeholder { /* Firefox 18- */
  color: green; 
}

#QuickSearch .textCtrl::-moz-placeholder {  /* Firefox 19+ */
  color: green; 
}


#QuickSearch .textCtrl:-ms-input-placeholder { 
  color: green; 
}

worked. thanks