1.877.226.2662

Customize Button Display Styles in Search Criteria

Customize Button Display Styles in Search Criteria

Return to Customize Search Criteria Styles

Modifying the default Styles for Buttons

There are several buttons displayed in the List Search Simple user interface, depending on how you configure the web part. Each has its own class to control the style. By default, the available buttons look like this:

search in all columns for1.png

NOTE: If the search is not configured to display results and criteria on the same page, the Print, Export to Excel, and Back buttons will appear on the results page.

The associated classes and default values are shown in the table below:

Button Class
Search

.SearchButtonStyle

The default setting is:

.SearchButtonStyle
{
width:auto ;
height:auto ;
}
Reset

.ResetButtonStyle

The default setting is:

.ResetButtonStyle
{
width:auto ;
height:auto ;
}
Print

.PrintButtonStyle

The default setting is:

.PrintButtonStyle
{
width:auto ;
height:auto ;
}
Export to Excel

.ExportButtonStyle

The default setting is:

.ExportButtonStyle
{
width:auto ;
height:auto ;
}
Back

NOTE: This button appears on the Search Results page if the web part is not configured to show results and criteria on the same page.

.BackButtonStyle

The default setting is:

.BackButtonStyle
{
width:auto ;
height:auto ;
}

The table below shows examples of common changes possible to buttons. Examples not included may also be possible.

Change Example
To add a border around a button, add a border property

Change to:

.SearchButtonStyle
{
width:auto ;
height:auto ;
border: 5px solid red;
}

The result looks like this:

button after border change.png

NOTE: The default layout of the List Search Simple has some formatting configured associated with the hover event. The border color and the background will change to a color inherited from the site theme. If you add the above change with the !important qualifier, the inherited hover behavior may be overruled.
To round the corners of the button, add a border-bottom-left-radius property along with the properties for the other corners.

For example, change to:

.SearchButtonStyle
{
width:auto ;
height:auto ;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-left-radius: 2em;
}

The result looks like this:

round button corners.png
To bold the font of the button text, add a font-weight property.

For example, change to:

.SearchButtonStyle
{
width:auto ;
height:auto ;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
border-top-left-radius: 2em;
border-top-left-radius: 2em;
font-weight: bold;
}

The result looks like this:

bold font.png