深入探讨：检测原生密码输入框可见状态的挑战与解决方案

/* 尝试通过:has()检测::-ms-reveal的状态，此方法无效 */
input:has(::-ms-reveal:active) {
  color: yellow; /* 期望：当密码可见时，文本颜色变为黄色 */
}

/* 可以直接为::-ms-reveal伪元素设置样式 */
::-ms-reveal {
  transform: scale(0.5);
  /* 其他样式，如颜色、背景等 */
}

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

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

<form>
  <div class="password-wrapper">
    <input type="password" id="passwordInput" placeholder="请输入密码">
    <button type="button" id="togglePasswordVisibility" aria-label="显示/隐藏密码">
      <span class="icon-eye-closed">?️</span> <!-- 示例图标 -->
    </button>
  </div>
</form>

document.addEventListener('DOMContentLoaded', () => {
  const passwordInput = document.getElementById('passwordInput');
  const toggleButton = document.getElementById('togglePasswordVisibility');

  if (passwordInput && toggleButton) {
    toggleButton.addEventListener('click', () => {
      const isPassword = passwordInput.type === 'password';
      passwordInput.type = isPassword ? 'text' : 'password';

      // 更新按钮图标或文本
      toggleButton.querySelector('span').textContent = isPassword ? '?' : '?️';
      toggleButton.setAttribute('aria-label', isPassword ? '隐藏密码' : '显示密码');

      // 根据密码可见状态添加或移除CSS类，用于样式或动画
      if (isPassword) {
        passwordInput.classList.add('is-visible');
      } else {
        passwordInput.classList.remove('is-visible');
      }
    });

    // 监听type属性的变化（例如，如果浏览器自动填充并改变了type）
    // 虽然不是所有浏览器都会在原生切换时触发，但对于自定义切换是有效的
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'type') {
                const currentType = passwordInput.type;
                if (currentType === 'text') {
                    passwordInput.classList.add('is-visible');
                    toggleButton.querySelector('span').textContent = '?';
                    toggleButton.setAttribute('aria-label', '隐藏密码');
                } else {
                    passwordInput.classList.remove('is-visible');
                    toggleButton.querySelector('span').textContent = '?️';
                    toggleButton.setAttribute('aria-label', '显示密码');
                }
            }
        }
    });
    observer.observe(passwordInput, { attributes: true });
  }
});

.password-wrapper {
  position: relative;
  display: inline-flex; /* 确保输入框和按钮在同一行 */
  align-items: center;
}

#passwordInput {
  padding-right: 40px; /* 为按钮留出空间 */
  transition: all 0.3s ease-in-out;
}

#passwordInput.is-visible {
  border-color: #007bff; /* 密码可见时改变边框颜色 */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  font-size: 1.6em; /* 密码可见时改变字体大小 */
}

#togglePasswordVisibility {
  position: absolute;
  right: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  font-size: 1.2em;
}