【:invalid和~后续兄弟选择器实现表单的分阶段展示】

最新推荐文章于 2024-08-07 17:09:44 发布

米老鼠的摩托车日记

最新推荐文章于 2024-08-07 17:09:44 发布

阅读量150

点赞数 1

分类专栏： CSS样式文章标签： elementui javascript css html

本文链接：https://blog.csdn.net/weixin_41747256/article/details/139739723

版权

CSS样式专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<form>
  <fieldset>
    <label for="form-name">姓名</label><br />
    <input type="text" name="name" id="form-name" required />
  </fieldset>

  <fieldset>
    <label for="form-email">电子邮件</label><br />
    <input type="email" name="email" id="form-email" required />
  </fieldset>

  <fieldset>
    <label for="form-message">信息</label><br />
    <textarea name="message" id="form-message" required></textarea>
  </fieldset>

  <button type="submit" name="send">提交</button>
</form>

css

/* 在无效的字段集后隐藏该字段集： */
fieldset:invalid ~ fieldset {
  display: none;
}

/* 在表单无效时，将按钮变暗并禁用它： */
form:invalid button {
  opacity: 0.3;
  pointer-events: none;
}

input,
textarea {
  box-sizing: border-box;
  width: 100%;
  font-family: monospace;
  padding: 0.25em 0.5em;
}

button {
  width: 100%;
  border: thin solid darkgrey;
  font-size: 1.25em;
  background-color: darkgrey;
  color: white;
}

知识点：:invalid 是 CSS 伪类选择器，用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素。

【官网】:invalid - CSS：层叠样式表 | MDN (mozilla.org)