<div class="container">
  <form>
    <h1>Advanced Form Styling</h1>
    <p class="has-dynamic-label">
      <input type="text" id="dynamic-label-input"  placeholder="Enter some text" required>
      <label for="dynamic-label-input">Enter some text</label>
    </p>
    <p>
      <label for="required-input">Required input</label>
      <input type="text" id="required-input" required>
      <span class="help-text"></span>
    </p>
    <p>
      <label for="optional-input">Optional input</label>
      <input type="text" id="optional-input">
      <span class="help-text"></span>
    </p>
    <p>
      <label for="disabled-input">Disabled input</label>
      <input type="text" id="disabled-input" disabled>
    </p>
    <p>
      <label for="read-only-input">Read-only input</label>
      <input type="text" id="read-only-input" value="Read-only value" readonly>
    </p>
    <p>
      <label for="valid-email">Valid input</label>
      <input type="email" id="valid-email" value="email@email.com" required>
      <span class="help-text"></span>
    </p>
    <p>
      <label for="invalid-email">Invalid input</label>
      <input type="email" id="invalid-email" value="notanemail" required>
      <span class="help-text"></span>
    </p>
    <p>
      <label for="in-range-input">In-range input</label>
      <input type="number" id="in-range-input" min="1" max="10" value="8" required>
      <span class="help-text"> (value must be between 1 and 10)</span>
    </p>
    <p>
      <label for="out-of-range-input">Out-of-range input</label>
      <input type="number" id="out-of-range-input" min="1" max="10" value="12" required>
      <span class="help-text"> (value must be between 1 and 10)</span>
    </p>
    <fieldset>
      <legend>Checked input</legend>
      <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option-1" value="1" checked />
        <label for="check-option-1">Option 1</label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option-2" value="2"/>
        <label for="check-option-2">Option 2</label>
      </div>
    </fieldset>
  </form>
</div>

<div class="tutorials">
  <a href="https://s.juejin.cn/ds/idkVFyE1/" target="_blank">
    <svg t="1696988571607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4422" width="200" height="200"><path d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z" p-id="4423"></path></svg>
  </a>
  
</div>
:root {
  --color-primary: #2eec96;
  --selection-color: #abffd9;
  --unitless-max-font-size: 18;
}

body {
  padding: 2rem 1rem;
  background-color: #2eec96;
}

form {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

form h1 {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-lighter);
  font-size: var(--font-size-3);
  text-align: center;
}

input {
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
 }

 .help-text {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--font-size-small);
}

input:placeholder-shown + label {
  opacity: 0;
  transform: translateY(1rem);
}

.has-dynamic-label {
  position: relative;
  padding-top: 1.5rem;
}

.has-dynamic-label label {
  position: absolute;
  top: 0;
  font-size: var(--font-size-small);
  opacity: 1;
  transform: translateY(0);
  transition: all 0.2s ease-out;
}

input:required + .help-text::before {
  content: '*Required';
}

input:optional + .help-text::before {
  content: '*Optional';
}

input:read-only {
  border-color: var(--gray-lighter) !important;
  color: var(--gray);
  cursor: not-allowed;
}

input:valid {
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg width='45px' height='34px' viewBox='0 0 45 34' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-56.000000, -59.000000%29' fill='%232EEC96'%3E%3Cpolygon points='70.1468531 85.8671329 97.013986 59 100.58042 62.5664336 70.1468531 93 56 78.8531469 59.5664336 75.2867133'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

input:invalid {
  border-color: var(--color-error);
  background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate%28-128.000000, -59.000000%29' fill='%23F44336'%3E%3Cpolygon points='157.848404 61.9920213 145.980053 73.8603723 157.848404 85.7287234 154.856383 88.7207447 142.988032 76.8523936 131.119681 88.7207447 128.12766 85.7287234 139.996011 73.8603723 128.12766 61.9920213 131.119681 59 142.988032 70.8683511 154.856383 59'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

input:invalid:focus {
  border-color: var(--color-error);
}

input:invalid + .help-text {
  color: var(--color-error);
}

input[type='email']:invalid + .help-text::before {
  content: 'You must enter a valid email.'
}

input:out-of-range + .help-text::before {
  content: 'Out of range';
}

input[type='checkbox'] + label {
  user-select: none;
}


.tutorials {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    width: 64px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #3f517e;
    padding: .5rem;
    display: grid;
    place-content: center;
    transition: all .28s linear;
    
    &:hover {
      background:#4161b2;
    }
    
    & svg {
      display: block;
      width: 100%;
      height: 100%;
      filter: invert(1);
    }
  }
View Compiled

External CSS

  1. https://www.w3cplus.com/sites/default/files/blogs/2017/1711/hiq.css

External JavaScript

This Pen doesn't use any external JavaScript resources.