What Blitzen Form Elements Can Be Styled with CSS?
Almost all of the elements on a form can be styled.
Here is a handy list of some elements you'll style most often
Selector name | Where it is found | Most Used Values | Type of Selector |
body | This is the under-layer to the entire form | background, margins, padding |
Tag (element) |
#form-submit canvas | This is the layer atop the form body | padding, margins | ID |
header | - form header | size, margins, padding | Tag (element) |
hr | - horizontal lines | size, color | Tag (element) |
h1 (header 1) | - form title | color, text, size | Tag (text) |
h4 (header 4) | - form field label - thank-you message |
color, text, size | Tag (text) |
h5 (header 5) | - form description under title | color, text, size | Tag (text) |
.traditional | where traditional form-fields are used | size, background, padding, margins | Class |
.small | - word count - progress bar |
color, text, size | Class (text) |
.material-input.traditional input, .material-input.traditional textarea, .material-textarea.traditional input, .material-textarea.traditional textarea |
This combination of classes targets the areas where people input text answers on the form. | size, color, margin, padding | Class |
.brand-logo | This is the custom header image | size | Class (image) |
.form-field-instructions-stacked | - field instructions - description field |
color, text, size | Class (text) |
.form-description | - form description | color, text, size | Class (text) |
.submit-container | This contains the submit button | all | Class |
.form-button | - submit button - progress bar |
all | Class (button) |
.form-footer | This is the 'Form provided by Blitzen' footer | display | Class |