field css and attributes do not work at all

How to apply custom CSS classes and attributes to form fields in ChronoForms.

Overview

The issue occurs because the Field Class setting modifies the container div, not the input element, and the HTML Attributes field adds new attributes without updating existing ones like 'class'.
To style the button directly, use CSS selectors targeting the button by its custom data attribute instead of relying on the built-in class fields.

Answered
ChronoForms v8
ze zest96 23 Apr, 2024

field css and attributes do not work at all, at least not in the free version I just installed for testing.

inspecting shows this:

<button class="nui button colored " name="button_2" value="" id="button_2" type="submit" data-test="test"> Button 2</button>

view source, shows this:

<button class="nui button colored " name="button_2" value="" id="button_2" type="submit" data-test="test" class="test">

I'd like to harness the site style, not to use nui styles. 

field css and attributes do not work at all image 1field css and attributes do not work at all image 2

Max_admin Max_admin 23 Apr, 2024
Answer
1 Likes

the Field Class is for changing the container div, so that will not update the input tag itself

The HTML Attributes class will always add a new attribute and so will not update the existing class attribute for a button, I think that you better do this for a button:

button[data-test]{
padding:10px;
}
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.