Forum Discussion

nathan's avatar
nathan
Executive
13 years ago

styling the search bar

By default the search bar looks like this:   We would like it to look like this:   The structure of the HTML for the existing search form is quite complex, so I'm struggling to find a way...
Daryll's avatar
Daryll
Mentor
13 years ago
I would also like to know how to do this.
  • ghayman's avatar
    ghayman
    Guide
    13 years ago

    To add a little to Monique's suggestions, here are a couple of CSS snippets we used for our restyled search.

     

    Large search box with rounded corners:

    #lia-body .lia-content .lia-component-quilt-header .lia-component-common-widget-search-bar input.search-input {
      height: 80px;
      width: 849px;
      font-size: 40px;

      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
      border-width: 1px;
      border-color: #cdcdcd;
    }

     

    Rounded corners will degrade nicely to square corners on older browsers.

     

     

    Restyled search button:

    #lia-body .lia-content .lia-component-quilt-header .lia-component-common-widget-search-bar .lia-button {
      height: 80px;
      width: 100px;
      background-color: #ed1556;
      border-color: #ed1556;
      background-image: url(/html/assets/search.png);
    }

     

    You can see the full thing here: http://forums.jawbone.com