Forms

CSSkel styles form elements to ensure consistent rendering across browsers, with a focus on usability and aesthetics. Form elements include inputs, textareas, selects, checkboxes, and radios, all styled with CSS variables for easy customization.

Input Fields

Input fields (e.g., input[type="text"], input[type="email"], etc.) have a consistent height, padding, and border, with focus states styled using the accent color.

<input type="text" placeholder="Text input">
<input type="email" placeholder="Email input">
<input type="number" placeholder="Number input">

Textarea

Textareas have a minimum height and match the styling of input fields.

<textarea placeholder="Enter your message"></textarea>

Select

Select elements are styled to match input fields, with a dropdown arrow provided by the browser.

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Checkboxes and Radios

Checkboxes and radios are styled inline, with labels using the .label-body class for additional text. Checkboxes use the accent color for their checked state.

<label>
    <input type="checkbox">
    <span class="label-body">Checkbox label</span>
</label>
<label>
    <input type="radio" name="radio">
    <span class="label-body">Radio option 1</span>
</label>
<label>
    <input type="radio" name="radio">
    <span class="label-body">Radio option 2</span>
</label>

Form Styling Variables

Form styles are controlled by the following CSS variables:

Variable	Description	Default Value
--input-height	Height of inputs and selects	38px
--input-padding	Padding of inputs and selects	6px 10px
--textarea-min-height	Minimum height of textareas	6.5em

Example Form

Here is an example of a complete form using CSSkel:

<form>
    <div class="columns cols:2 mb:1">
        <div>
            <label for="email">Email</label>
            <input class="full-width" type="email" id="email" placeholder="[email protected]">
        </div>
        <div>
            <label for="reason">Reason</label>
            <select class="full-width" id="reason">
                <option value="1">Question</option>
                <option value="2">Feedback</option>
            </select>
        </div>
    </div>
    <label for="message">Message</label>
    <textarea class="full-width" id="message" placeholder="Your message"></textarea>
    <div class="columns cols:2">
        <div><input class="button-primary" type="submit" value="Submit"></div>
        <div class="align-right">
            <label>
                <input type="checkbox">
                <span class="label-body">Send a copy to yourself</span>
            </label>
        </div>
    </div>
</form>