1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 How to change color of search space

Discussion in 'Styling and Customization Questions' started by billybatz9, Nov 18, 2013.

  1. billybatz9

    billybatz9 Active Member

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

    Attached Files:

  2. Shelley

    Shelley Well-Known Member

    Adding the following in EXTRA.CSS will change that.

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

    Amaury Well-Known Member

    Actually, just edit @textCtrlBackground in the color palette.
     
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

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

    billybatz9 Active Member

    @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?
     
    Amaury likes this.
  6. Shelley

    Shelley Well-Known Member

    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.
     
  7. Amaury

    Amaury Well-Known Member

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

    Do you want to change the placeholder or input text?
     
  8. Jeremy

    Jeremy XenForo Moderator Staff Member

    Shelley and Amaury like this.
  9. Amaury

    Amaury Well-Known Member

  10. billybatz9

    billybatz9 Active Member

  11. Shelley

    Shelley Well-Known Member

    Try the following.

    Code:
    #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;  
    }
     
    Kamal Saleh, billybatz9 and Jeremy like this.
  12. billybatz9

    billybatz9 Active Member

    worked. thanks
     

Share This Page