Generated by SassMeister.com.

SassMeister-input-HTML.html

<h2>Default Form</h2>
<form>
    <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
    <input class="text-input" id="account" type="num" value="123456789" readonly>
    
    <label for="email">Email</label>
    <input class="text-input" id="email" type="email" placeholder="Email">
    <span class="helper-text">Enter your email address</span>
    
    <label for="password">Password</label>
    <input class="text-input" id="password" type="password" placeholder="Password" disabled>
    
    <label for="gender">Gender</label>
    <select id="gender">
        <option>Female</option>
        <option>Male</option>
        <option>Other</option>
    </select>
    
    <lable>Introduce yourself</lable>
    <textarea></textarea>
    
    <label for="newsletter">
        <input id="newsletter" type="checkbox"> Send me the newsletter
    </label>
    
    <button type="submit" class="btn">Sign in</button>
</form>

<br><hr>

<h2>Unordered List Form</h2>
<form>
    <ul class="form--list">
        <li class="input-container">
            <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
            <input class="text-input" id="account" type="num" value="123456789" readonly>
        </li>
        <li class="input-container">
            <label for="email">Email</label>
            <input class="text-input" id="email" type="email" placeholder="Email">
            <span class="helper-text">Enter your email address</span>
        </li>
        <li class="input-container">
            <label for="password">Password</label>
            <input class="text-input" id="password" type="password" placeholder="Password" disabled>
        </li>
        <li class="input-container">
            <label for="gender">Gender</label>
            <select id="gender">
                <option>Female</option>
                <option>Male</option>
                <option>Other</option>
            </select>
        </li>
        <li class="input-container">
            <lable>Introduce yourself</lable>
            <textarea></textarea>
        </li>
        </li>
        <li class="input-container">
            <label for="newsletter">
                <input id="newsletter" type="checkbox"> Send me the newsletter
            </label>
        </li>
    </ul>
    <button type="submit" class="btn">Sign in</button>
</form>

<br><hr>

<h2>Inline Form</h2>
<form class="form--inline">
    <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
    <input class="text-input" id="account" type="num" value="123456789" readonly>
    
    <label for="email">Email</label>
    <input class="text-input" id="email" type="email" placeholder="Email">
    
    <label for="password">Password</label>
    <input class="text-input" id="password" type="password" placeholder="Password" disabled>
    
    <label for="gender">Gender</label>
    <select id="gender">
        <option>Female</option>
        <option>Male</option>
        <option>Other</option>
    </select>
    
    <lable>Introduce yourself</lable>
    <textarea></textarea>
    
    <label for="newsletter">
        <input id="newsletter" type="checkbox"> Send me the newsletter
    </label>
    
    <button type="submit" class="btn">Sign in</button>
</form>

<br><hr>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

.text-input,
textarea,
[type=text],
[type=url],
[type=week],
[type=time],
[type=tel],
[type=search],
[type=password],
[type=number],
[type=month],
[type=email],
[type=datetime],
[type=date] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 100%;
    line-height: inherit;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
}
select {
  background-color: #fff;
  font-size: 100%;
}

// ==========================================================================
// Forms
// ==========================================================================
//
// These are base styles for forms as well as some helpful classes to
// make alignment and state easier.
///

//
// Scales namespace variable
///
$scales-namespace: null !default;

//
// Available Variables
///
$fieldset-padding: 1em !default;
$text-input-padding: .5em !default;
$text-input-border-width: 1px !default;
$text-input-border-style: solid !default;
$text-input-border-color: #000 !default;
$text-input-border-radius: 0 !default;
$input-container-margin-bottom: 1em !default;
$input-disabled-border-color: #aaa !default;
$input-disabled-background-color: #ccc !default;
$input-disabled-text-color: #aaa !default;
$input-readonly-border-color: #aaa !default;
$input-readonly-background-color: #ccc !default;
$input-readonly-text-color: #000 !default;

//
// Main form styles
///
fieldset {
    padding: $fieldset-padding;
}

//
// Use when marking up a form as an unordered list. e.g. <ul class="form-list">
///
.form--list {
    list-style: none;
    margin: 0;
    padding: 0;
}

//
// If you wrap your label/input groups in a container, use this class to
// apply a margin on the bottom for better vertical spacing control.
//
// This could be a <div> or <span> or an <li> if you are using a list
///
.input-container {
    margin-bottom: $input-container-margin-bottom;
}

//
// Labels
//
// The ".label" class can be used to make an element look like a
// label if an actual label isn't suitable.
//
///
label,
.label {
    display: block;
}

// Extra help text in labels
.label--additional {
    display: block;
    font-weight: normal;
}

//
// Text inputs
//
// Instead of a `[type]` selector for each kind of form input,
// just use a class to target any/every one, e.g.:
// <input type="text" class="text-input">
// <input type="email" class="text-input">
// <input type="password" class="text-input">
//
///
.text-input,
select,
textarea {
    display: block;
    padding: $text-input-padding;
    border: $text-input-border-width;
    border-style: $text-input-border-style;
    border-color: $text-input-border-color;
    border-radius: $text-input-border-radius;
}

//
// Force form elements into a single inline row
///
.form--inline {
    .text-input,
    select,
    textarea,
    label,
    .label {
        display: inline-block;
        vertical-align: middle;
    }
}

//
// Input states
///

// Disabled
input[disabled],
select[disabled],
textarea[disabled],
input.is-disabled,
select.is-disabled,
textarea.is-disabled {
    cursor: not-allowed;
    border-color: $input-disabled-border-color;
    background-color: $input-disabled-background-color;
    color: $input-disabled-text-color;
}

// Read Only
input[readonly],
select[readonly],
textarea[readonly],
input.is-readonly,
select.is-readonly,
textarea.is-readonly {
    border-color: $input-readonly-border-color;
    background-color: $input-readonly-background-color;
    color: $input-readonly-text-color;
}

//
// Extra help text displayed after a field when that field is in focus.
//
// Can't be used with .form--inline
///
.helper-text {
    display: none;
}

.text-input:active + .helper-text,
.text-input:focus + .helper-text,
textarea:active + .helper-text,
textarea:focus + .helper-text {
    display: block;
}

SassMeister-output.css

.text-input,
textarea,
[type=text],
[type=url],
[type=week],
[type=time],
[type=tel],
[type=search],
[type=password],
[type=number],
[type=month],
[type=email],
[type=datetime],
[type=date] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: 100%;
  line-height: inherit;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}

select {
  background-color: #fff;
  font-size: 100%;
}

fieldset {
  padding: 1em;
}

.form--list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.input-container {
  margin-bottom: 1em;
}

label,
.label {
  display: block;
}

.label--additional {
  display: block;
  font-weight: normal;
}

.text-input,
select,
textarea {
  display: block;
  padding: 0.5em;
  border: 1px;
  border-style: solid;
  border-color: #000;
  border-radius: 0;
}

.form--inline .text-input,
.form--inline select,
.form--inline textarea,
.form--inline label,
.form--inline .label {
  display: inline-block;
  vertical-align: middle;
}

input[disabled],
select[disabled],
textarea[disabled],
input.is-disabled,
select.is-disabled,
textarea.is-disabled {
  cursor: not-allowed;
  border-color: #aaa;
  background-color: #ccc;
  color: #aaa;
}

input[readonly],
select[readonly],
textarea[readonly],
input.is-readonly,
select.is-readonly,
textarea.is-readonly {
  border-color: #aaa;
  background-color: #ccc;
  color: #000;
}

.helper-text {
  display: none;
}

.text-input:active + .helper-text,
.text-input:focus + .helper-text,
textarea:active + .helper-text,
textarea:focus + .helper-text {
  display: block;
}

SassMeister-rendered.html

<h2>Default Form</h2>
<form>
    <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
    <input class="text-input" id="account" type="num" value="123456789" readonly>
    
    <label for="email">Email</label>
    <input class="text-input" id="email" type="email" placeholder="Email">
    <span class="helper-text">Enter your email address</span>
    
    <label for="password">Password</label>
    <input class="text-input" id="password" type="password" placeholder="Password" disabled>
    
    <label for="gender">Gender</label>
    <select id="gender">
        <option>Female</option>
        <option>Male</option>
        <option>Other</option>
    </select>
    
    <lable>Introduce yourself</lable>
    <textarea></textarea>
    
    <label for="newsletter">
        <input id="newsletter" type="checkbox"> Send me the newsletter
    </label>
    
    <button type="submit" class="btn">Sign in</button>
</form>

<br><hr>

<h2>Unordered List Form</h2>
<form>
    <ul class="form--list">
        <li class="input-container">
            <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
            <input class="text-input" id="account" type="num" value="123456789" readonly>
        </li>
        <li class="input-container">
            <label for="email">Email</label>
            <input class="text-input" id="email" type="email" placeholder="Email">
            <span class="helper-text">Enter your email address</span>
        </li>
        <li class="input-container">
            <label for="password">Password</label>
            <input class="text-input" id="password" type="password" placeholder="Password" disabled>
        </li>
        <li class="input-container">
            <label for="gender">Gender</label>
            <select id="gender">
                <option>Female</option>
                <option>Male</option>
                <option>Other</option>
            </select>
        </li>
        <li class="input-container">
            <lable>Introduce yourself</lable>
            <textarea></textarea>
        </li>
        </li>
        <li class="input-container">
            <label for="newsletter">
                <input id="newsletter" type="checkbox"> Send me the newsletter
            </label>
        </li>
    </ul>
    <button type="submit" class="btn">Sign in</button>
</form>

<br><hr>

<h2>Inline Form</h2>
<form class="form--inline">
    <label for="account">Account #<small class="label--additional">(Cannot Change)</small></label>
    <input class="text-input" id="account" type="num" value="123456789" readonly>
    
    <label for="email">Email</label>
    <input class="text-input" id="email" type="email" placeholder="Email">
    
    <label for="password">Password</label>
    <input class="text-input" id="password" type="password" placeholder="Password" disabled>
    
    <label for="gender">Gender</label>
    <select id="gender">
        <option>Female</option>
        <option>Male</option>
        <option>Other</option>
    </select>
    
    <lable>Introduce yourself</lable>
    <textarea></textarea>
    
    <label for="newsletter">
        <input id="newsletter" type="checkbox"> Send me the newsletter
    </label>
    
    <button type="submit" class="btn">Sign in</button>
</form>

<br><hr>