CSS: How to customize the Ticket Purchase widget

Unfortunately on my page background the light green selection boxes and the lime green check marks don't really show. AI provided me with CSS code which i dumped into the advanced designer CSS editor but its not working this is on a clone of the other form I was working on this is the CSS code as it was given to me and verified by AI

 /* Change the border color of the selection boxes to black */ #input_225 .ticket-container .ticket-item { border-color: black; } /* Change the background color of the selection boxes on hover and selection to black */ #input_225 .ticket-container .ticket-item:hover, #input_225 .ticket-container .ticket-item.selected { background-color: black; } /* Change the color of the check mark to dark green */ #input_225 .ticket-container .ticket-item.selected:after { color: darkgreen; }

This is the address of the form i am currently struggling with the intent was to get the Check mark to a dark green and the borders around the small boxes that get checked to black looks like there is a bit more in this code.

jotform.com/build/251186423862156

Hi James,

The checkmark in the checkbox is actually an image, so we can’t change its color directly. But we can Inject CSS Codes into your form to change the background and border color of the checkbox to make it more visible. Let me walk you through it:

1. First, copy this code:

/*Changes the background and border color of the checkbox of a Ticket Purchase widget - 26603471*/

.checklist label.checkbox .before, .checklist label.checkbox .after  {

border: 2px solid black!important;

background-color: darkgreen;

}

/*Code ends here*/

2. In Form Builder, click on the Wand icon below the Ticket Purchase widget.

3. Now, in the Widget Settings, click on the Custom CSS tab, paste the code into the CSS Code box. Click Update.

Give it a try and let us know how it goes.

That's a wrap Form is now doing everything i need it to do and is as user friendly as it can be.