Create Nice Clean Form Fields Using Pure CSS – formbase

Preview:

Description:

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>

Changelog:

v7.0.0 (09/17/2018)

• Focus styling for radio and checkbox control