隐藏按钮、css

什JMY

已于 2023-07-20 11:37:25 修改

阅读量195

点赞数

文章标签： css

于 2023-07-20 11:30:51 首次发布

本文链接：https://blog.csdn.net/weixin_53644473/article/details/131826304

版权

从工作以来很少再系统的去专注着学习某个东西了，要么是视频时长很难跟完，要么就是文字的教程很少有完整的，以及自己本就碎片的事件有时候很难静下心，不知道朋友们有何好的建议以及方法、或者自己都是在哪学习的都可以交流。

偶然看见一个网址：推荐下学习前端，不想跟视频的可以尝试下
MDN Web Docs

看到css时，看到一个案例，当表单无效时，隐藏按钮，当上一个输入框无效时（未被使用时）隐藏下面的输入框
贴下图吧
表单完整、且输入框有效的情况

表格无效时、提交按钮无效
输入第一个输入框、第二个输入框出现、默认只有第一个
一个简单的css就解决了隐藏按钮，或者当选择下拉框同意或者不同意时的页面动态效果

最后贴下代码自己测试吧

html文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>开始学习 CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>

  <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>
  

</body>

</html>

css 文件

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;
}

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

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