<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
This Pen doesn't use any external JavaScript resources.