Material forms
Material design forms. Build simple and modern forms using our material inputs.
The material forms are useful to create a modern website.
Use our <form class="form-material"> class on the form container to
create a material design form, with simple and nice animations.
Note that you can disable the custom design on a specific element by adding the
.form-default class on the corresponding form field.
Note that you can change the animation direction of the border-bottom from right to left by adding the
.form-rtl class on the corresponding .form-field.
These designs require JavaScript.
Forms using
To set an input field, wrap your label and input inside a div with a
.form-field class.
To design your inputs, simply add the .form-control class on it.
Readonly and disabled inputs are designed too.
Methods
| Method | Description |
|---|---|
| Axentix.Forms.updateInputs() | This method is scanning the HTML page to update all the inputs. |
Styling
| CSS Variable | Default value | Description |
|---|---|---|
--ax-form-material-color
|
#4D9F85 | Global material color. |
--ax-form-material-transition-duration
|
0.3s | Material form transition duration. |
--ax-form-material-label-color
|
#7C7C7C | Material form label color. |
--ax-form-material-border
|
2px solid #c7c7c7 | Material form border. |
--ax-form-material-disabled-border
|
2px dashed #c7c7c7 | Material form disabled border. |
--ax-form-material-active-border-width
|
2px | Material form active border width. |
--ax-form-material-active-border-style
|
solid | Material form active border style. |
--ax-form-material-after-z-index
|
15 | Material form active bar z-index. |