使用css判断输入是否为空

版权声明：转载请注明出处，谢谢。 https://blog.csdn.net/butterfly5211314/article/details/81901258

上面这张图是某设计稿的一部分, 两个输入框分别为密码和重复密码.
看第一个密码输入框的那几个黑点, 比正常的大, 相邻两个的间距也比较大, 看起来比较协调.
正常情况下, 那几个黑点是挤在一起的, 而且比较小.

可能我们从来没管过这个, 这个确实没什么影响, 不过昨天我忽然想到这个效果怎么实现, 折腾了一下.

仔细思考下, 我们要的是什么样的效果呢?
在输入不为空的情况下, 黑点的间距和大小要比正常效大一些

在找了一番后, 发现根本没有使用css直接判断input的value是否为空的方法. 只找到的类似的方法, 参看:
https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css

主要思路就是设置input的required属性为true,
然后使用:valid选择器来实现(对required为true的input而言,输入值后才会被:valid选中),
这样就可以间接地实现上面的效果.

<div class="form-group">
  <input type="password" class="pwd" placeholder="password" required>
</div>
<div class="form-group">
    <input type="password" class="repwd" placeholder="repassword" required>
</div>

/* scss代码 */
.form-group {
  padding: 20px;
  input {
    $h: 20px;
    width: 200px;
    height: $h;
    line-height: $h;
    font-size: 12px;
  }

  .pwd:valid {
    font-size: 20px;
    letter-spacing: 6px;
  }

  .repwd:valid {
    letter-spacing: normal;
  }
}

效果如下:

在线demo地址为: https://codepen.io/GerryLon/pen/KxKoRr

---

参考:
https://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css

---

欢迎补充指正.