深入理解CSS :has() 与原生密码显示按钮的交互限制及实现替代方案

<form>
  <div class="password-wrapper">
    <input type="password" id="passwordInput" placeholder="请输入密码">
    <button type="button" id="togglePassword" class="toggle-password">
      <span class="icon-eye-hidden"></span> <!-- 初始为隐藏图标 -->
    </button>
  </div>
</form>

.password-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding-right: 10px; /* 为按钮留出空间 */
}

#passwordInput {
  border: none;
  padding: 10px;
  font-size: 1em;
  outline: none;
  flex-grow: 1;
}

.toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-password:focus {
  outline: none;
}

/* 示例图标样式 (可以使用SVG, Font Awesome等) */
.icon-eye-hidden::before {
  content: '?️'; /* 隐藏图标示例 */
  font-size: 1.2em;
  color: #888;
}

.icon-eye-visible::before {
  content: '?'; /* 显示图标示例 */
  font-size: 1.2em;
  color: #888;
}

/* 根据密码可见性添加样式，例如改变输入框边框颜色 */
.password-wrapper.visible #passwordInput {
  border-color: #007bff;
}

document.addEventListener('DOMContentLoaded', () => {
  const passwordInput = document.getElementById('passwordInput');
  const togglePasswordButton = document.getElementById('togglePassword');
  const passwordWrapper = document.querySelector('.password-wrapper');

  togglePasswordButton.addEventListener('click', () => {
    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
    passwordInput.setAttribute('type', type);

    // 切换图标样式
    if (type === 'text') {
      togglePasswordButton.querySelector('span').classList.remove('icon-eye-hidden');
      togglePasswordButton.querySelector('span').classList.add('icon-eye-visible');
      passwordWrapper.classList.add('visible'); // 添加可见性类
    } else {
      togglePasswordButton.querySelector('span').classList.remove('icon-eye-visible');
      togglePasswordButton.querySelector('span').classList.add('icon-eye-hidden');
      passwordWrapper.classList.remove('visible'); // 移除可见性类
    }

    // 聚焦到输入框，提升用户体验
    passwordInput.focus();
  });
});