上面這張圖是某設計稿的一部分, 兩個輸入框分別為密碼和重複密碼.
看第一個密碼輸入框的那幾個黑點, 比正常的大, 相鄰兩個的間距也比較大, 看起來比較協調.
正常情況下, 那幾個黑點是擠在一起的, 而且比較小.

可能我們從來沒管過這個, 這個確實沒什麼影響, 不過昨天我忽然想到這個效果怎麼實現, 折騰了一下.

仔細思考下, 我們要的是什麼樣的效果呢?
在輸入不為空的情況下, 黑點的間距和大小要比正常效大一些

主要思路就是設定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;
  }
}

效果如下:

歡迎補充指正.