Support » Theme: Twenty Eleven » [Theme: Twenty Eleven] Change border and text color of search widget

  • I’m using a twentyeleven child theme and I am having trouble changing the border and text color of a search widget I’ve put into the footer (I’ve removed the search from the header). I thought adding the following to style.css in my child theme would work:

    .widget_search #searchsubmit {
    	border: 1px solid #B8753D; /* brown */
    	color: #DF9B62; /* light orange */

    Sadly not. Any help gratefully appreciated. Site URL:

Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael


    Forum Moderator

    try to work with a browser inspection tool such as Firebug to identify the involved styles;

    in your case:

    .widget_search input#s

    Thanks alchymyth. I only just started using Firebug today and was having some trouble with it, but thanks to your suggestion I’ve persevered and figured out how to use it now. And the style you noted was indeed the culprit. However, while changing this style works to change the border and text color in Firefox, for some reason only the border changes in Chrome, while the text color remains grey. On checking IE the text (“Search”) doesn’t appear at all for some reason.

    After investigating further, changing the text color for this style applies correctly to any text that is typed into the text box (in Chrome, Firefox, and IE). However, the word “Search” that appears in the search box before you type anything is the specified color only in Firefox. In Chrome it remains the default twentyeleven theme grey. In IE the word “Search” fails to appear at all. It’s not really too big a deal, so I’m wondering if I might just have to live with this, but it is a little perplexing. Any ideas on whether there might be a fix?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Theme: Twenty Eleven] Change border and text color of search widget’ is closed to new replies.