如何检测原生密码输入框的显示状态：::-ms-reveal 伪元素的局限性

/* 示例：尝试改变 ::-ms-reveal 本身的样式 */
::-ms-reveal {
  transform: scale(0.5); /* 可以生效 */
}

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

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

/* 尝试通过 :has() 检测 ::-ms-reveal 的状态，但这不会生效 */
input:has(::-ms-reveal:active) {
  color: yellow;
}

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

<div class="password-wrapper">
  <input type="password" id="passwordInput" placeholder="请输入密码">
  <button type="button" id="togglePassword">显示</button>
</div>

.password-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#passwordInput {
  padding-right: 40px; /* 为按钮留出空间 */
}

#togglePassword {
  position: absolute;
  right: 5px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9em;
  color: #555;
}

#togglePassword:hover {
  color: #000;
}

document.addEventListener('DOMContentLoaded', function() {
  const passwordInput = document.getElementById('passwordInput');
  const toggleButton = document.getElementById('togglePassword');

  toggleButton.addEventListener('click', function() {
    // 切换输入框的类型
    if (passwordInput.type === 'password') {
      passwordInput.type = 'text';
      toggleButton.textContent = '隐藏';
      // 在这里可以添加显示密码时的动画或样式
      passwordInput.classList.add('is-visible');
    } else {
      passwordInput.type = 'password';
      toggleButton.textContent = '显示';
      // 在这里可以添加隐藏密码时的动画或样式
      passwordInput.classList.remove('is-visible');
    }
  });

  // 示例：根据密码是否可见添加/移除动画类
  // 假设你想在密码可见时，输入框有特殊的边框动画
  const style = document.createElement('style');
  style.textContent = `
    .password-wrapper input.is-visible {
      border-color: #4CAF50;
      box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
      transition: all 0.3s ease-in-out;
    }
    .password-wrapper input:not(.is-visible) {
      transition: all 0.3s ease-in-out;
    }
  `;
  document.head.appendChild(style);
});