Search Form (widget) Style – Twenty Twelve vs. Twenty Ten

  • Author
  • #1027660

    I’ve been going back and forth between several themes, and I think I may be going with Twenty Ten. However, Twenty Twelve has a much cooler search format, w/ hitting the return key instead of having a “Search” button.

    I see that I can lengthen the search box (in Twenty Ten), and force the button onto a second line, by modifying the CSS “.widget_search #s” – Increasing the search box from 60%. I also see that the search box works without using the “Search” button by simply hitting the return key.

    What I would like to do is get rid of the button in Twenty Ten, and possibly include the word “Search” in the empty box. I tried using a text widget to make my own search form, but then discovered that <from> tags are among the forbidden tags, and so that of course didn’t work.

    Is there a workaround? A method of eliminating (or hiding) the button in the Twenty Ten search form, and possibly including my own default text (e.g. “Search”) in the empty search box?

    Note: I don’t have the “Custom Design” upgrade yet, but I may be upgrading to change out the fonts, so if there is a remedy that involves modifying the CSS file that would be perfect.

    The blog I need help with is


    Hello! Hiding the search button in Twenty Ten via Custom Design Upgrade is pretty easy. The following code will work:

    #searchsubmit {
    display: none;

    You can then make the search box a bit wider with:

    #primary #s {
    width: 200px;

    It is not really possible to include the text inside the search box the correct way though.


    Thanks for the swift reply!

    I just upgraded to Custom Design the other day, so I’ll give this a shot and see how it works.

The topic ‘Search Form (widget) Style – Twenty Twelve vs. Twenty Ten’ is closed to new replies.