form-preset-with-grid

form-preset-with-grid.markdown

form-preset-with-grid

A Pen by Kolja on CodePen.

License.

index.html

<form>
  <fieldset>
    <legend>Form preset</legend>

    <label for="">Text</label>
    <input type="text">

    <label>Email</label>
    <input type="email">

    <label>Password</label>
    <input type="password">

    <label>Search</label>
    <input type="search">

    <label>Tel</label>
    <input type="tel">

    <label>URL</label>
    <input type="url">

    <label>Number</label>
    <input type="number">

    <label>Week</label>
    <input type="week">

    <label>Month</label>
    <input type="month">

    <label>Time</label>
    <input type="time">

    <label>Date</label>
    <input type="date">

    <label>Datetime</label>
    <input type="datetime-local">

    <label>Color</label>
    <input type="color">

    <label>File</label>
    <input type="file">

    <label>Image</label>
    <input type="image">

    <label>Range</label>
    <input type="range">

    <label for="">checkboxes</label>
    <div class="ckb">
      <label for="">eins
        <input type="checkbox">
      </label>
      <label for="">eins
        <input type="checkbox">
      </label>
      <label for="">eins
        <input type="checkbox">
      </label>
      <label for="">eins
        <input type="checkbox">
      </label>
    </div>

    <label for="">Radio</label>
    <div class="rdb">
      <input type="radio" id="1" name="radio" value="eins">
      <label for="1"> eins</label>
      <input type="radio" id="2" name="radio" value="zwei">
      <label for="2"> zwei</label>
      <input type="radio" id="3" name="radio" value="drei">
      <label for="3"> drei</label>
    </div>

    <label for="">This is a verry long text fo a label</label>
    <input type="text">

    <label for="">Textarea</label>
    <textarea></textarea>

    <label>Submit</label>
    <input type="submit">

    <label>Button</label>
    <input type="button" value="Send">

    <label>Reset</label>
    <input type="reset">

  </fieldset>
</form>

style.css

:root {
  --bg-body: rgba(221, 221, 217, 1);
  --bg-fieldset: rgba(238, 238, 238, 1);
  --bg-input: rgba(244, 244, 244, 1);
  --bg-button: rgba(200, 200, 200, 1);
  --border-fieldset: rgba(128, 128, 128, 1);
  --border-input: rgba(128, 128, 128, 1);
  --border-radius-input: 0.2rem;
  --border-radius-fieldset: 0.5rem;
  --width-label: 15ch;
}

body {
  background-color: var(--bg-body);
  padding-top: 5rem;
  display: flex;
  justify-content: center;
}

fieldset {
  /* TWO COLUMNS WITH GRID */
  display: grid;
  gap: 1rem 1rem;
  grid-template-columns: auto auto;
  width: max-content;
  /* TWO COLUMNS WITH GRID */
  background-color: var(--bg-fieldset);
  border: 2px solid var(--border-fieldset);
  border-radius: var(--border-radius-fieldset);
  padding: 1rem;
  box-shadow: 5px 5px 10px 1px rgba(0, 0, 0, 0.2);
}

legend {
  font-size: 1.2rem;
  background: rgb(238, 238, 238);
  background: linear-gradient(0deg, var(--bg-fieldset) 0%, var(--bg-body) 100%);
}

fieldset > label {
  min-width: fit-content;
  max-width: var(--width-label);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="week"],
input[type="month"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="color"],
input[type="file"],
input[type="image"],
input[type="range"],
input[type="submit"],
input[type="button"],
input[type="reset"],
textarea {
  height: 1.3rem;
  background-color: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--border-radius-input);
}
input[type="submit"],
input[type="button"],
input[type="reset"] {
  height: 1.5rem;
  background-color: var(--bg-button);
}
input[type="file"] {
  height: 1.5rem;
  border: none;
}
textarea {
  height: unset;
}