Css editing

Hi @fixxit91

Thanks for your inquiry!

You can add your classes to fields and then apply styling to that class selector using your own custom CSS.

To add a class:

1. Click to edit the field.
2. In the sidebar, click the ‘Advanced’ tab.
3. Under ‘Classes’ add a class name under ‘Field Wrapper’ or ‘Field’. e.g. my-class-name
4. Click ‘Save’.

In the custom CSS for your theme, you could then add something like:

.my-class-name {
    color: #ff0000; 
}

Obviously this is just an example and you could apply whatever CSS properties you like to that field.

Alternatively if you are familiar with using the browser inspector you could inspect your field, obtain the ID of the field (they are all unique) and then apply CSS to that ID too, e.g.

#wsf-1-field-123 {
    color: #ff0000;
}

Many thanks

Mark

Hi @fixxit91

You could use the :checked pseudo class to handle that. You can learn more about it here:

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

An example of styling default checkboxes in WS Form would be:

input[type=checkbox].wsf-field.my-class-name:checked + label.wsf-label:before {
    background-color: #205493;
    border-color: #205493;
}

I have been quite specific on the selector there to ensure your CSS overrides our CSS. Note the my-class-name part which you would change to your class name.

Thanks

Mark

Hi @fixxit91

Use CSS classes instead of ID’s for your selectors and then you can use those across all your forms even if you clone them.

Many thanks

Mark