VelinStyle Form Control
Style text inputs and textareas with .velin-input. Supports sizing, disabled, readonly, and plaintext states.
Text inputs
Apply .velin-input to any text-type <input> for consistent cross-browser styling.
<input type="text" class="velin-input" placeholder="Enter text">
<input type="email" class="velin-input" placeholder="name@example.com">
<input type="password" class="velin-input" placeholder="Password">Textarea
The .velin-input class also works on <textarea> elements.
<textarea class="velin-input" rows="4" placeholder="Write something..."></textarea>Sizing
Use .velin-input--sm or .velin-input--lg for smaller or larger inputs.
<input type="text" class="velin-input velin-input--sm" placeholder="Small">
<input type="text" class="velin-input" placeholder="Default">
<input type="text" class="velin-input velin-input--lg" placeholder="Large">Disabled
Add the disabled attribute to grey out the input and prevent interaction.
<input type="text" class="velin-input" placeholder="Disabled input" disabled>
<textarea class="velin-input" placeholder="Disabled textarea" disabled></textarea>Readonly
The readonly attribute prevents editing but keeps normal styling. Add .velin-input--plaintext to strip borders and background.
<input type="text" class="velin-input" value="Cannot edit this" readonly>
<input type="text" class="velin-input velin-input--plaintext" value="email@example.com" readonly>File input
<input type="file" class="velin-input">
<input type="file" class="velin-input" multiple>Color input
<input type="color" class="velin-input velin-input--color" value="#0d6efd">