如何在不改变HTML密码输入框实际宽度的前提下缩小其可输入宽度以避免密码内容覆盖自定义显示/隐藏图标

Great question! Trying to modify the browser's internal user-agent shadow DOM is a dead end here—those elements are intentionally protected, and their structure varies across browsers, so external CSS can't reliably target them. Instead, we can achieve your desired outcome with a clean, cross-browser approach that doesn't require touching the shadow DOM at all.

The Core Idea #

We'll add percentage-based right padding to the password input to reserve space for the toggle icon, then position the icon absolutely over that padded area. This keeps the input's actual width unchanged, shrinks the editable area to your desired percentage, and works perfectly for responsive layouts.

Step-by-Step Implementation #

1. HTML Structure

Wrap the input and toggle icon in a relative-positioned container (this lets us absolute-position the icon inside it):

<div class="password-input-wrapper">
  <input type="password" class="password-input" placeholder="Password">
  <button class="password-toggle-btn" type="button">👁️</button>
</div>

2. CSS Styling

The key here is using box-sizing: border-box to ensure padding doesn't alter the input's total width, and setting a percentage-based padding-right to shrink the editable area:

.password-input-wrapper {
  position: relative;
  width: 100%; /* Make the container responsive */
  max-width: 450px; /* Optional: Limit maximum width */
}

.password-input {
  width: 100%;
  padding: 0.75rem 15% 0.75rem 0.75rem; /* 15% right padding for the icon */
  box-sizing: border-box; /* Critical: Ensures padding is included in the input's width */
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.password-toggle-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%); /* Vertically center the icon */
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
}

Why This Works #

• No width changes: The input's width: 100% combined with box-sizing: border-box keeps its total width exactly as you set it—no unexpected expansion.
• Responsive editable area: The 15% right padding means the editable content will always take up 85% of the input's width, regardless of how the input scales.
• Cross-browser compatibility: This works in all modern browsers (and even older ones) without relying on shadow DOM hacks.

Bonus: Toggle Password Visibility #

If you haven't already added the functionality to show/hide the password, here's a quick JavaScript snippet to pair with the above:

const toggleBtn = document.querySelector('.password-toggle-btn');
const passwordInput = document.querySelector('.password-input');

toggleBtn.addEventListener('click', () => {
  const type = passwordInput.type === 'password' ? 'text' : 'password';
  passwordInput.type = type;
  // Swap icon if needed
  toggleBtn.textContent = type === 'password' ? '👁️' : '🙈';
});

This approach is far more reliable than trying to modify the browser's internal shadow DOM, and it meets all your requirements: no input width changes, percentage-based editable area, and full responsiveness.

内容的提问来源于stack exchange，提问作者noblerare