vcl-input
v0.1.3
Published
Standard HTML form input controls
Downloads
7
Readme
VCL input
Standard HTML form input controls.
Features
Styling of all HTML form controls like input, textarea, select and custom input (made of div and styling) based input controls.
Usage
Sizing
Text input controls are set to be inline-blocks and take 100% width by default. The occupied width can also be limited by placing input elements in a container with the desired size. Layout grid containers are perfectly suited for this purpose. Secondly they can be sized using the percentage based spans from the layout spans module.
Basic Input
Text inputs can be created with an HTML input
element or from a div
element with the vclInput
class and additional attributes for accessibility.
Placeholder
Custom an normal HTML inputs can have a placeholder.
Validation
The validation state of an input can be visualized by the standard modifiers
vclError
, vclWarning
and vclSuccess
.
Focused State
Disabled State
Read only State
Multi Line Text Input
Radio Button
Check Box
File Selector
Standard Select Box
Classes
vclInput
Modifiers
vclFocused
vclDisabled
vclReadonly
Variables
--input-height
--input-line-height
--input-textarea-line-height
--input-outline-focus-color
--input-color
--input-text-placeholder-color
----input-text-placeholder-font-style
--input-border-width
--input-border-color
--input-border-radius
--input-border-focus-color
--input-bg-color
--input-bg-focus-color
--input-disabled-color
--input-disabled-border-color
--input-disabled-bg-color
Demo
example.html on GH-pages.