表单控件样式化（Form Control Styling）

/* 路线 A：保留原生控件，只染色（一行，成本最低） */
:root {
  accent-color: #7c3aed;   /* checkbox/radio/range/progress 的选中色 */
}

/* 路线 B：appearance:none 完全自绘（全控制，成本高） */
.checkbox input {
  appearance: none;        /* 卸掉浏览器内置渲染 */
  width: 1.25rem;
  aspect-ratio: 1;
  border: 2px solid #cbd5e1;
  border-radius: .25rem;
  display: grid;
  place-content: center;
  transition: background .15s, border-color .15s;
}
.checkbox input:checked {
  background: #7c3aed;
  border-color: #7c3aed;
}
.checkbox input:checked::before {
  content: "";
  width: .9rem;
  height: .5rem;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-15%);
}

.switch input {
  appearance: none;
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 999px;
  background: #d1d5db;
  position: relative;
  transition: background .2s;
  cursor: pointer;
}
.switch input::after {
  content: "";
  position: absolute;
  inset: .1875rem auto .1875rem .1875rem;  /* 拇指停靠左侧 */
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: #fff;
  transition: translate .2s;
}
.switch input:checked {
  background: #16a34a;
}
.switch input:checked::after {
  translate: 1.25rem 0;                     /* 拇指滑到右侧 */
}

.switch input:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

input:invalid {          /* 坑：页面刚加载就红 */
}
input:user-invalid {     /* 正解：仅在用户交互后判定 */
  border-color: #dc2626;
  background: #fef2f2;
}
input:user-invalid + .hint { visibility: visible; }

.form-row {
  display: grid;
  gap: .25rem;
}
.hint {
  visibility: hidden;    /* 默认隐藏提示 */
  color: #dc2626;
  font-size: .8125rem;
}

<div class="form-row">
  <label for="email">邮箱</label>
  <input id="email" type="email" required autocomplete="email">
  <p class="hint">请输入有效邮箱地址</p>
</div>

/* 输入框随内容伸缩（Chrome 123+） */
input[type="text"], textarea {
  field-sizing: content;
  min-width: 12ch;      /* 下限：空值时不至于只剩光标 */
  max-width: 100%;
}
textarea {
  field-sizing: content;
  min-height: 3lh;      /* 至少三行高，lh 单位随行高缩放 */
  max-height: 12lh;
}
/* 光标颜色：品牌色贯穿输入体验 */
input { caret-color: #7c3aed; }

select {
  appearance: none;
  padding: .5rem 2.25rem .5rem .75rem;
  border: 1px solid #cbd5e1;
  border-radius: .375rem;
  background: url("data:image/svg+xml,...chevron-down...") no-repeat right .75rem center / 1rem;
}
select:invalid { color: #9ca3af; }  /* 未选时的占位色 */

<style>
  :root { --brand: #7c3aed; }
  form { display: grid; gap: 1rem; max-width: 320px; }
  .row { display: grid; gap: .25rem; }
  input:not([type="checkbox"]) {
    field-sizing: content; min-width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #cbd5e1; border-radius: .375rem;
    caret-color: var(--brand);
    transition: border-color .15s;
  }
  input:user-invalid {
    border-color: #dc2626;
    background: #fef2f2;
  }
  input:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 1px;
  }
  .row:has(input:user-invalid) .hint { visibility: visible; }
  .hint { visibility: hidden; color: #dc2626; font-size: .8125rem; }
  label.remember { display: flex; gap: .5rem; align-items: center; }
  input[type="checkbox"] { accent-color: var(--brand); width: 1rem; }
  button {
    background: var(--brand); color: #fff;
    padding: .625rem; border: 0; border-radius: .375rem;
    cursor: pointer;
  }
</style>
<form>
  <div class="row">
    <label for="email">邮箱</label>
    <input id="email" name="email" type="email" required autocomplete="email">
    <p class="hint">请输入有效邮箱</p>
  </div>
  <div class="row">
    <label for="pwd">密码</label>
    <input id="pwd" name="pwd" type="password" required minlength="8" autocomplete="current-password">
    <p class="hint">密码至少 8 位</p>
  </div>
  <label class="remember"><input type="checkbox" checked> 记住我</label>
  <button type="submit">登录</button>
</form>