---
title: "Modifying the CSS of Front-end approval"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/entry-approval/modifying-the-css-of-front-end-approval/"
---

*Front-end Approval requires GravityView Version 1.19 or newer*

## Overriding the CSS

 If you want to use your own CSS file instead of the bundled file, there are two ways:

- Place a CSS file named `field-approval.css` in your theme's `/gravityview/css/` directory
- Use the `gravityview/field/approval/css_url` filter to modify the URL to the CSS file. If you return an empty string, it will disable loading the CSS file altogether.

## About the CSS

 The entry approval buttons are created using the CSS ::before selector; [check out the source files](https://github.com/gravityview/GravityView/blob/master/templates/css/source/field-approval.scss) to get a better understanding of how they are created.

 Front-end entry approval buttons use [Dashicons icons](https://developer.wordpress.org/resource/dashicons/) for the symbols. All the entry approval toggle buttons have the `.gv-approval-toggle` CSS class. The three different approval states have the following CSS classes:

- `.gv-approval-approved` - Approved; green checkbox `\f147`
- `.gv-approval-disapproved` - Rejected; red x `\f158`
- `.gv-approval-unapproved` - Not yet reviewed: yellow circle `\f159`

### Example: Removing button borders and background

 If you want to give the buttons no border and a transparent background, use this code:

```

```