Form CSS

If you would like to apply CSS or HTML to your forms, here are some commonly used selectors.

CSS for Input Forms

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
		

Still need help? Contact Us Contact Us