Generated by SassMeister.com.

SassMeister-input-HTML.html

<h2>Default Form</h2>
<form class="">
    <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">

    <label for="state">State</label>
    <select id="state">
        <option>AL</option>
        <option>CA</option>
        <option>IL</option>
    </select>

    <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox"> Remember me
    </label>
    
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

<br><hr>

<h2>Unordered List Form</h2>
<form class="">
    <ul class="form-list">
        <li class="input-container">
            <label for="email">Email</label>
            <input class="text-input" id="email" type="email" placeholder="Email">
        </li>
        <li class="input-container">
            <label for="password">Password</label>
            <input class="text-input" id="password" type="password" placeholder="Password">
        </li>
        <li class="input-container">
            <label for="state">State</label>
            <select id="state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
        </li>
        <li class="input-container">
            <label for="remember" class="pure-checkbox">
                <input id="remember" type="checkbox"> Remember me
            </label>
        </li>
    </ul>
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

<br><hr>

<h2>Inline Form</h2>
<form class="form-inline">
    <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">

    <label for="state">State</label>
    <select id="state">
        <option>AL</option>
        <option>CA</option>
        <option>IL</option>
    </select>

    <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox"> Remember me
    </label>

    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

<br><hr>

<h2>Multi Column Form</h2>
<form class="">
    <ul class="multi-col-list four-columns">
        <li class="input-container">
            <label for="email">Email</label>
            <input class="text-input" id="email" type="email" placeholder="Email">
        </li>
        <li class="input-container">
            <label for="password">Password</label>
            <input class="text-input" id="password" type="password" placeholder="Password">
        </li>
        <li class="input-container">
            <label for="state">State</label>
            <select id="state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
        </li>
        <li class="input-container">
            <label for="remember" class="pure-checkbox">
                <input id="remember" type="checkbox"> Remember me
            </label>
        </li>
    </ul>
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

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%;
}

%clearfix {

    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

//
// Multi Column List classes
///
.multi-col-list {
    @extend %clearfix;
    list-style: none;
    margin-left: 0;

    > li {
      float: left;
    }
}

//
// This mixin allows you to change the number of columns at different
// breakpoints.
///
@mixin columns($columns) {

    @if $columns == 2 {

        > li {
            width: 50%;
        }
    }

    @if $columns == 3 {

        > li {
            width: 33.333333333%;
        }
    }

    @if $columns == 4 {

        > li {
            width: 25%;
        }
    }

    @if $columns == 5 {

        > li {
            width: 20%;
        }
    }

    @if $columns == 6 {

        > li {
            width: 16.666666667%;
        }
    }
}

//
// Apply these classes alongside the .multi-col-list class to
// set the number of columns. Placeholders are available so
// these widths can be extended instead.
///
.two-columns,
%two-columns {
    @include columns(2);
}

.three-columns,
%three-columns {
    @include columns(3);
}

.four-columns,
%four-columns {
    @include columns(4);
}

.five-columns,
%five-columns {
    @include columns(5);
}

.six-columns,
%six-columns {
    @include columns(6);
}

// ==========================================================================
// 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;

//
// 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;
}

//
// 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;
  }
}

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%;
}

.multi-col-list:after {
  content: "";
  display: table;
  clear: both;
}

.multi-col-list {
  list-style: none;
  margin-left: 0;
}
.multi-col-list > li {
  float: left;
}

.two-columns > li {
  width: 50%;
}

.three-columns > li {
  width: 33.333333333%;
}

.four-columns > li {
  width: 25%;
}

.five-columns > li {
  width: 20%;
}

.six-columns > li {
  width: 16.666666667%;
}

fieldset {
  padding: 1em;
}

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

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

label,
.label {
  display: block;
}

.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;
}

SassMeister-rendered.html

<h2>Default Form</h2>
<form class="">
    <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">

    <label for="state">State</label>
    <select id="state">
        <option>AL</option>
        <option>CA</option>
        <option>IL</option>
    </select>

    <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox"> Remember me
    </label>
    
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

<br><hr>

<h2>Unordered List Form</h2>
<form class="">
    <ul class="form-list">
        <li class="input-container">
            <label for="email">Email</label>
            <input class="text-input" id="email" type="email" placeholder="Email">
        </li>
        <li class="input-container">
            <label for="password">Password</label>
            <input class="text-input" id="password" type="password" placeholder="Password">
        </li>
        <li class="input-container">
            <label for="state">State</label>
            <select id="state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
        </li>
        <li class="input-container">
            <label for="remember" class="pure-checkbox">
                <input id="remember" type="checkbox"> Remember me
            </label>
        </li>
    </ul>
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

<br><hr>

<h2>Inline Form</h2>
<form class="form-inline">
    <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">

    <label for="state">State</label>
    <select id="state">
        <option>AL</option>
        <option>CA</option>
        <option>IL</option>
    </select>

    <label for="remember" class="pure-checkbox">
        <input id="remember" type="checkbox"> Remember me
    </label>

    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>

<br><hr>

<h2>Multi Column Form</h2>
<form class="">
    <ul class="multi-col-list four-columns">
        <li class="input-container">
            <label for="email">Email</label>
            <input class="text-input" id="email" type="email" placeholder="Email">
        </li>
        <li class="input-container">
            <label for="password">Password</label>
            <input class="text-input" id="password" type="password" placeholder="Password">
        </li>
        <li class="input-container">
            <label for="state">State</label>
            <select id="state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
        </li>
        <li class="input-container">
            <label for="remember" class="pure-checkbox">
                <input id="remember" type="checkbox"> Remember me
            </label>
        </li>
    </ul>
    <button type="submit" class="pure-button pure-button-primary">Sign in</button>
</form>