我試圖通過JS輸入密碼元素來制作動畫。我想通過點擊標準圖標來區分兩個動畫，這取決于密碼是否可見。我知道可以通過添加一個復選框來顯示/隱藏密碼，并使用element.type = = & quot密碼& quot用JS代替。因為我肯定更喜歡沒有復選框的干凈版本，所以我希望在這里找到一個解決方案。

不幸的是，到目前為止，我還沒有取得多大進展。除了我上面描述的變通辦法，我嘗試使用::-ms-reveal作為一個偽類，但不出所料，它不起作用。

::-ms-reveal {
  transform: scale(0.5);
}

input {
  font-size: 1.5em;
  color: green;
}

input:focus {
  font-size: 2em;
  color: red;
}

input:has(::-ms-reveal:active) {
  color: yellow;
}

<form>
  <input type="password" placeholder="Type Password here!">
</form>

引用這篇WebKit博客文章，在標題“和更多”下的第四段中:

需要注意的是CSS工作組決定禁止所有 中的現有偽元素有()。舉個例子， 文章:has(p::一線)和ol:has(li::marker)都不行。相同的 with ::before和::after。

所以看起來你運氣不好，至少目前如此。您可以設計::-ms-reveal偽元素本身(reveal圖標/按鈕)的樣式，但不能設計父元素& lt輸入& gt元素的狀態，使用:has。Edge分配類。單擊后顯示給偽元素，但是當前不允許選擇器輸入:has(::-ms-reveal.reveal)。輸入:有(。reveal)也不行，我試過了。

如果Github中的評論是可靠的，CSS工作組將來可能會放寬這一限制。或許值得等到Chrome、Firefox和Safari在密碼輸入中提供顯示按鈕。