Form CSS
If you would like to apply CSS or HTML to your forms, here are some commonly used selectors.
| Element |
HTML example |
CSS selector |
| Form Container |
<div class="zn-input-form"></div>
|
.zn-input-form
|
| Labels |
<label class="form-label">Form Label</label>
|
.form-label
|
| Inputs |
<input type="text" class="form-control">
|
.form-control
|
| Button |
<button class="btn">Save</button>
|
.btn
|
| Checkbox/Radio Label |
<label class="checkbox-label">option1</label>
|
.checkbox-label
|
| Error Message |
<div class="field-error">Error</div>
|
.field-error
|
| Success Message |
<div class="alert-success">Success</div>
|
.alert-success
|
| Heading |
<h3 class="heading">Header</h3>
|
.heading
|
CSS for Display Forms
| Element |
HTML example |
CSS selector |
| Form Container |
<div class="zn-display-form"></div>
|
.zn-display-form
|
| Labels |
<dt class="form-label">Form Label</dt>
|
.form-label
|
| Field data |
<dd class="form-data">Form Data</dd>
|
.form-data
|
| Heading |
<h3 class="heading">Header</h3>
|
.heading
|
