Cookbook

Cookbook 🧑‍🍳

The discovery of a new dish does more for the happiness of the human race than the discovery of a star.

Jean Anthelme Brillat-Savarin

Drag and Drop Input

Upload or drag a file above Accepts any filetype
Code

<label style="display: flex; flex-direction:column; text-align:center;">
  <input
      ondragover="this.style.backgroundColor='var(--color-3)';" 
      ondragleave="this.style.backgroundColor='var(--color-1)';"
      ondrop="this.style.backgroundColor='var(--color-1)';"
      style="background: var(--color-1);
             padding-top: 3em;
             padding-bottom: 3em;
             padding-left: 5em;
             padding-right: 5em;
             border-radius:1em;
             border: .25em dashed var(--color-4);
             "
      name="file-upload"
      type="file"
      ></input>
  <br>
  Upload or drag a file above
  <small>Accepts any filetype</small>
</label>

Radio Buttons

🍎 Apple 🍊 Orange 🍐 Pear

Code

<style>
label:has(input[type="radio"]):hover{
  background: #9FB3DF;
}

label:has(input[type="radio"]:checked){
  background: #9FB3DF;
}
</style>

<div style="display:flex;">
  <label 
    class="radio-label"
    style="cursor: pointer;
           padding: 1em;
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           margin: 0.5em;
           border: 1px solid #000;
           border-radius: 1.5em;
           width: 5em;
           height: 5em;
           "
    for="radio-1">
    <span style="font-size: 3em;">🍎</span>
    <small>Apple</small>

    <input
      id="radio-1"
      type="radio"
      name="example-radio"
      value="apple"
    />
  </label>

  <label 
    class="radio-label"
      style="
             cursor: pointer;
             padding: 1em;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             margin: 0.5em;
             border: 1px solid #000;
             border-radius: 1.5em;
             width: 5em;
             height: 5em;
             "
      for="radio-2">
    <span style="font-size: 3em;">🍊</span>
    <small>Orange</small>

    <input
        id="radio-2"
        type="radio"
        name="example-radio"
        value="orange"
        />
  </label>

  <label 
    class="radio-label"
      style="cursor: pointer;
             padding: 1em;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             margin: 0.5em;
             border: 1px solid #000;
             border-radius: 1.5em;
             width: 5em;
             height: 5em;"
      for="radio-3">
    <span style="font-size: 3em;">🍐</span>
    <small>Pear</small>

    <input
        id="radio-3"
        type="radio"
        name="example-radio"
        value="pear"
        />
  </label>
</div>

Vanilla Stack 🍦

Cookbook 🧑‍🍳