Description The id of the actual input box of the search bar on each page. Containers Contained by #search-top-box-form

Outline Click to view in closer detail!

Details

This is the id of the actual text box for the search box. Using this, you can style the text field itself. Commonly, designers will style this element with padding, colors, and borders.

Initially, this <input> box also has the classes .text and .empty. When nothing has been entered into the field, the <input> box has both of these. Once it has been clicked (even if nothing was inputted) the .empty class will disappear. Therefore, you can make two different styles based on whether the box was clicked or not, like on this site. You do this using the following:

#search-top-box-input.text{
    STYLE WHEN CLICKED;
}
#search-top-box-input.empty.text{
    STYLE BY DEFAULT;
}

Notice that no spaces were used in the selector statements.

Examples

By default, the search box on this site always has a blue border. We've changed with the below code to have a red border by default and then a green border when clicked.

#search-top-box-input.text{    border-color: #0F0; }
#search-top-box-input.empty.text{    border-color: #F00; }

Try It on the CSS Zone Sandbox!

Base CSS