# Customizing Report Items Appearance

Learn how to customize report items appearance in the ActiveReports.NET JS Report Viewer

## Content

## Custom TextBox and CheckBox Styles

You can customize the appearance of [TextBox](/activereportsnet/docs/v20.1/report-authors/report-controls/report-controls-page-rdl-report/textbox){:target="_blank"} and [CheckBox](/activereportsnet/docs/v20.1/report-authors/report-controls/report-controls-page-rdl-report/checkbox){:target="_blank"} report items using the `CustomCSSClasses` property. This allows you to apply specific CSS classes to these elements when they are rendered in the `JS Report Viewer`.
This feature is particularly useful for UI enhancements, such as styling standard text boxes to resemble interactive buttons within your report.

### Pre-defined Styles

The [JS Report Viewer deliverables](https://www.npmjs.com/package/@mescius/activereportsnet-viewer){:target="_blank"} include a default custom stylesheet, `jsViewer.custom.styles.css`. This file contains pre-defined classes such as:

* `ar-button`
* `ar-button-pressed`

You can utilize these styles out-of-the-box or create your own custom CSS file to define unique visual behaviors.

### Configuration

To enable custom styles, you must configure the viewer to load your CSS file. Set the `reportItemsStyles.cssUri` property to the location of your stylesheet during viewer initialization.

>type=note
> Ensure that the CSS file is accessible via a URL within the application scope.

```javascript
import { createViewer } from '@mescius/activereportsnet-viewer';

const viewer = createViewer({
  reportItemsStyles: {
    // Point this to your custom CSS or the default file provided
    cssUri: 'jsViewer.custom.styles.css'
  }
})
```

### Implementation Example

You can see this feature in action in the [JSViewer sample](https://github.com/activereports/WebSamples20/tree/main/JSViewer_MVC_Core).
In the `TaxiDriveReport` example, the `Reset Filter` button utilizes the `ar-reset-link` style, which is defined in the project's `wwwroot\custom.styles.css` file.
![image](https://cdn.mescius.io/document-site-files/images/8900da79-62c4-44bb-a8b0-49e017584cb5/image-20260107.58bfa3.png)