Target a specific form via CSS?

I am going to use a public form for sign-up and want it to blend nicely with the website. Is there any way to target specific forms via CSS? I don’t see any specific ID etc, but then again I’m far from a CSS expert! Thanks :slight_smile:

So this is a completely silly way to do it, but it’s what I did to make it so I could edit specific forms.

  1. You have to add a 1x1 pixel into the ‘subtitle’ as follows:

Code: ![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=#newproject)

All this is is a base64 1x1 pixel with a #yourformname at the end that identifies the name of your form.

This is the code selector to select any elements on the form page, you just add what elements you want after this selector:

[data-testid="new-record-form"]:has(img[src$="#newproject"])  /*any class*/{
.background:blue;
}

Next - use the following code to select any element on the form page:

/*Always include this line to hide the img and related styles that noloco adds*/
img[src$="#newproject"]{display: none;}

/*eg select all H1's on this form page*/ 
[data-testid="new-record-form"]:has(img[src$="#newproject"]) h1 {
  color:white;
  background-color: red;
}

… again, completely silly way - Ideally they would add the form name as an id or class to the page at the highest level so you could customize things a little easier.

Wow thanks @seanvosler, appreciate you taking the time to document this. You really are the chief Noloco CSS hacker :smiley:

lol im currently attempting to figure out how to use AI to clean up my 5k lines of CSS, it’s a mess hahha