Create Nice Clean Form Fields Using Pure CSS – formbase

formbase is a cross-browser CSS library used to reset and beautify the default styles of your form fields.

How to use it:

Include the core style sheet in the HTML page and the formbase is ready for use.

<link rel="stylesheet" href="formbase.min.css">

Insert your input elements to the form as displayed below:

<label class="label" for="anrede">Anrede</label>
<select class="select" id="anrede" name="anrede">
  <option selected disabled>-</option>
  <option value="frau">Frau</option>
  <option value="herr">Herr</option>
</select>
<label class="label" for="wohnort">Wohnort</label>
<select class="select" id="wohnort" name="wohnort" disabled>
  <option value="frau">Deutschland</option>
  <option value="herr">Frankreich</option>
</select>
<label class="label" for="vorname">Vorname</label>
<input class="input" id="vorname" name="vorname" type="text" autocorrect="off" autocomplete="given-name" placeholder="Max">
<label class="label" for="nachname">Nachname</label>
<input class="input" id="nachname" name="nachname" type="text" autocorrect="off" autocomplete="family-name" placeholder="Mustermann">
<label class="label" for="firma">Firma</label>
<input class="input" id="firma" name="firma" type="text" autocorrect="off" autocomplete="organization" placeholder="Musterfirma">
<label class="label" for="strassehausnummer">Straße / Hausnummer</label>
<input class="input" id="strassehausnummer" name="strassehausnummer" type="text" autocorrect="off" autocomplete="address-line1" placeholder="Musterstraße 1">
<label class="label" for="plz">PLZ</label>
<input class="input" id="plz" name="plz" type="text" pattern="\d*" novalidate autocorrect="off" autocomplete="postal-code" placeholder="12345">
<label class="label" for="ort">Ort</label>
<input class="input" id="ort" name="ort" type="text" autocorrect="off" autocomplete="address-level2" placeholder="Musterort">
<label class="label" for="telefon">Telefon</label>
<input class="input" id="telefon" name="telefon" type="tel" autocorrect="off" autocomplete="tel" placeholder="Musterort">
<label class="label" for="email">E-Mail</label>
<input class="input" id="email" name="email" type="email" autocapitalize="off" autocorrect="off" autocomplete="email" placeholder="[email protected]">
<label class="label" for="fax">Fax</label>
<input class="input" id="fax" name="fax" type="tel" autocorrect="off" placeholder="+49 123456" disabled>
<label class="label" for="fax">File</label>
<input class="input" id="file" name="file" type="file">
<label class="label" for="nachricht">Nachricht</label>
<textarea class="input" id="nachricht" name="nachricht" rows="8" cols="40"></textarea>
<div class="control">
  <input class="control__input" id="optionone" type="radio" name="option" value="optionone" checked>
  <label class="control__label" for="optionone">Option One</label>
</div>
<div class="control">
  <input class="control__input" id="optiontwo" type="radio" name="option" value="optiontwo">
  <label class="control__label" for="optiontwo">Option Two</label>
</div>
<div class="control">
  <input class="control__input" id="optionthree" type="radio" name="option" value="optionthree" disabled>
  <label class="control__label" for="optionthree">Option Three</label>
</div>
<div class="control">
  <input class="control__input" id="checkone" type="checkbox" name="checkone" value="checkone" checked>
  <label class="control__label" for="checkone">Check One</label>
</div>
<div class="control">
  <input class="control__input" id="checktwo" type="checkbox" name="checktwo" value="checktwo">
  <label class="control__label" for="checktwo">Check Two</label>
</div>
<div class="control">
  <input class="control__input" id="checkthree" type="checkbox" name="checkthree" value="checkthree" disabled>
  <label class="control__label" for="checkthree">Check Three</label>
</div>

Customize the library by overriding the default variables in the main.scss.

$formbase__prefix: ''; // Class name prefix
$formbase__margin: .9rem; // Margin
$formbase__padding: .6rem; // Padding
$formbase__select_size: 12px; // Size of the select arrow
$formbase__control_size: 20px; // Size of the checkbox and radio button (1)
$formbase__radius: 0; // Input border radius
$formbase__svg: #000; // Hex color for svgs (2)
$formbase__color: #000; // Input and label color
$formbase__placeholder: #999; // Input placeholder color
$formbase__background: #fff; // Background color
$formbase__border: #bbb; // Border color
$formbase__active: #17f; // Active highlight color
$formbase__shadow: inset 0 1px 3px rgba(0, 0, 0, .05); // Shadow styling
$formbase__duration: .3s; // Transition duration
$formbase__timing: ease; // Transition timing

Changelog:

v12.0.0 (02/13/2020)

• Add border transition to all elements

v11.0.0 (07/20/2019)

• Fixed HTML form validation message
• Improved centering of checkbox/radio button

v10.0.0 (05/05/2019)

• Added $formbase__select_size option to change the size of the select arrow
• Added $formbase__control_size option to change the size of the control checkbox and radio button
• Fixed The height of control elements is now always correct, even when the control itself if taller than the text

v9.0.0 (04/07/2019)

• Changed $formbase__gutter is now separated into $formbase__margin and $formbase__padding
• Fixed Long select option text continues below select arrow

v8.0.0 (02/22/2019)

• Fixed minification bug that broke with IE placeholders
• Added CSS for consistent cross browser styling even without normalize.css
• Added $formbase__radius option to change input border radius
• Added $formbase__color option to change input color
• Added $formbase__placeholder option to change input placeholder color
• Changed Default active color is now

v7.0.0 (09/17/2018)

• Focus styling for radio and checkbox control