Sassy Inputs

Minimal CSS3 cross-browser form input styles.

Sassy Inputs is a Sass mixin library designed to bring simple, uniform, unobtrusive styles to form input fields.

It aims to smooth out the differences in native form styling across browsers, by customizing input fields as much as is currently possible with pure CSS.

Sassy Inputs are customizable, fully keyboard operable, and include a disabled state.

Getting started

To download from npm and save to your package.json:

npm install sassy-inputs --save

At the top of your Sass file, before you use any of the mixins:

@import "node_modules/sassy-inputs/sass/main";

Mixins

• sassy-text
• sassy-textarea
• sassy-search
• sassy-select
• sassy-select-multiple
• sassy-radio
• sassy-checkbox
• sassy-button

Examples & usage

Text fields

Text

Email

Password

URL

Number

You can use the sassy-text mixin for most HTML5 plain single-line text fields, including email, password, number and URL.

input[type=text],
input[type=url],
input[type=email],
input[type=password],
input[type=number] {
  @include sassy-text;
}

Text area

textarea {
  @include sassy-textarea;
}

Search

textarea {
  @include sassy-search;
}

Dropdowns

Select

For select dropdowns, you will need to put your <select> element in a wrapper, and apply the mixin to the wrapper instead:

<div class="select-wrap">
  <select>
    <option value="option">Option 1</option>
    <option value="option">Option 2</option>
    <option value="option">Option 3</option>
  </select>
</div>

.select-wrap {
  @include sassy-select;
}

Multiple select

Option 1 Option 2 Option 3 Option 4 Option 5 Option 1 Option 2 Option 3 Option 4 Option 5

select[multiple] {
  @include sassy-select-multiple;
}

Radio buttons

Radio button 1 Radio button 2

Disabled checked Disabled unchecked

Make sure your <input type="radio"> elements are written in this format, with the label after the input:

<input type="radio" id="radio1" name="groupname" value="thisvalue">
<label for="radio1">Radio button 1</label>

input[type=radio] {
  @include sassy-radio;
}

Checkboxes

Checkbox 1 Checkbox 2

Disabled checked Disabled unchecked

Make sure your <input type="checkbox"> elements are written in this format, with the label after the input:

<input type="checkbox" id="check1" name="groupname" value="thisvalue">
<label for="check1">Checkbox 1</label>

input[type=checkbox] {
  @include sassy-checkbox;
}

Buttons

Submit Submit

input[type=submit],
input[type=button],
button {
  @include sassy-button;
}

Customization

Sassy Inputs use the following default variables:

$sassy-base-color: #777 !default;
$sassy-accent-color: coral !default;
$sassy-disabled-color: #eee !default;

To change a color, simply assign the variable before importing Sassy Inputs:

$sassy-accent-color: rgb(233, 206, 51);
@import "node_modules/sassy-inputs/sass/main";