SOLVED: How to style a single form field?

Bugs
1

Hi everyone!

I’m trying to style a single field from a form.
I’ve tried with the ID, with the form-field prefix as in the code (with the 0 that appears in the inspector and without it) and it’s not working. Any insight?
Thank you!

#dxvczi{
font-size: var(–text-xs);
}

#form-field-dxvczi-0{
font-size: var(–text-xs);
}

1 Like
2

Hi Jo,

the ID that is displayed inside the field settings is not the CSS ID, which is obviously a bug. I’ve added it to the bug tracker. If you take a look at the source code, you will see that the ID is different, so I think your code doesn’t work.

If you style like here in the screenshot on input#form-field-9b42b9 { … } it should definitely work.
It would be best if you just address both IDs so that once the bug is fixed you don’t have to change anything :wink:

Bildschirmfoto 2022-06-02 um 09.37.52

input#form-field-9b42b9,
input#form-field-c6c0ec {
  /* your styles */
}

Best regards,
timmse

1 Like
3

Thanks Timmse, just wanted to share what it looks like for me. Same id with the added -0 and [] (what is that?)
image

image
image1694×152 15.3 KB

I tried this:
input#form-field-dxvczi-0,
input#form-field-dxvczi {
font-size: var(–text-xs);
}
with and without the brackets [], without the input#, without the variable, with !important and it didn’t work.
The only way I found was with:
.options-wrapper label {
font-size: var(–text-s) !important;
}
the page is Contact – ADn Solutions, in case there is any interest

4

Aaaah it’s about the checkbox!
Ok, the zero at the end is the identifier for the first field, -1 would be the second, -2 the third, and so on. Therefore, that’s perfectly ok.

So you just want to change the font size of the checkbox label? Try this:

input#form-field-dxvczi-0+label {
  color: red;
  font-size: .75rem !important;
}

The problem is that the label itself has no ID and cannot be addressed directly. Here the element+element selector is quite handy.

Bildschirmfoto 2022-06-02 um 14.17.25
Bildschirmfoto 2022-06-02 um 14.17.252880×442 73.6 KB

Best regards,
timmse

5

Lol no, it wasn’t about the checkbox but now I learned something, thanks! :smile:

6

But input#form-field-dxvczi-0 is the checkbox… :thinking:

7

yes, now I get that…
I styled the text with the options-wrapper class meanwhile.
Will get back to it to do it with the id, thanks a lot!

8

Hi Jo,
short feedback: with the IDs it is not a bug, because we can ensure that the form also works within a query loop.

Custom CSS should always be applied to the CSS ID (found in the source code) and not to the field ID (found in the field settings).

Best regards,
timmse