Twenty-Eleven Search form

  • Author
  • #670136


    It looks like there is a border-style or box-shadow on my search form. I’m not using the widget, this is the search form in the header. I can’t find any reference to any style or shadow besides what is in the widget and I’ve even tried changing that code. Any help removing that look would be awesome!

    Blog is


    The blog I need help with is



    This appears to be a CSS editing question as you already have another CSS editing thread here > I’ll flag this thread so it gets moved to the CSS forum for you. It may be a good idea just to continue with the first thread but I’ll leave that up to Staff to decide.



    New to the forums so thanks for your help.


    For the search form in the header area, you need to specifically target it since it uses the same selectors as the widget. Below is the targeted selector with the existing declarations which you can edit or modify as you see fit.

    #branding #searchform input[type="text"] {
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #DDDDDD;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    color: #888888;




    Thanks so much. I don’t think I would have figured that one on my own…. :0


    You are welcome. It’s a little tricky since you have to target the searchform using its parent selectors so as not to kill the formatting in the search widget. I found it out when someone wanted to remove the search box, which we did, but then the search widget came up blank when inserted into the sidebar. That was when I noticed they both used the same classes and IDs.

The topic ‘Twenty-Eleven Search form’ is closed to new replies.