Html 如何检测输入字段是否没有必填且没有占位符

<div class="form-item-input">
  <input
    type="text"
    name="mail"
    id="mail"
    placeholder=""
    required>
  <label for="mail">Email</label>
</div>

<div class="form-item-input">
  <input
    type="text"
    name="name"
    id="name"
    placeholder="">
  <label for="name">Name</label>
</div>

  .input {
    & label {
      position: absolute;
      left: 3px;
      top: 7px;
      color: #959595;
      font-size: 18px;
      transition: all ease .2s;
    }
  
    &:focus {
      & ~ label {
        top: -16px;
        left: 0;
        font-size: 15px;
      }
    }
  }

input{
 transition: all .5s;
}
input:not(:placeholder-shown), input:focus{
  background: lime;
}

<div class="form-item-input">
  <input
    type="text"
    name="mail"
    id="mail"
    placeholder=" "
    required>
  <label for="mail">Email</label>
</div>

<div class="form-item-input">
  <input
    type="text"
    name="name"
    id="name"
    placeholder=" ">
  <label for="name">Name</label>
</div>

Html相关问答推荐

角｜将动态html属性添加到子组件

Chrome和Safari浏览器中的CSS3动画不同

窗口视图之外的下拉菜单位置

如何将内容元素放在侧边栏旁边？

<nav和button是姐妹元素.当添加了导航活动类时，我如何为按钮编写CSS？

如何在CSS中延迟触发2个转换？

为什么带有截断的 contentedible div 在受约束时会在 Chrome 中添加空格

如何在悬停时更改同级元素 CSS

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单？

margin-top 未应用于无序列表的第一项

Github上部署需要花费几小时时间：等待github pages部署批准

当作为常规图片输入时，Cloudfront分布式图像可显示，但作为背景图像不显示

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白？

如何配置 prettier 使其以 Vue.js 模板语法的特定方式运行？

不完整的悬停

不同屏幕尺寸的显示问题

在 html 邮箱的左侧和右侧制作多个元素很热门吗？

尽管设置了 width：100% left：0，但居中对齐的 CSS 动画并不对称

那里有一个类似于 ？

SVG 适用于 Safari，不适用于 Chrome