如何在input密码输入框的右侧加小眼睛

在HTML和CSS中，通常通过设计模式和图标配合来实现密码输入框右侧显示“小眼睛”功能，也就是切换显示/隐藏密码的功能。这个功能常常用于提供视觉提示，让用户能够查看他们输入的内容。下面是一个简单的示例：

<input type="password" id="passwordInput" class="hide-eye">
<span class="eye-icon" onclick="togglePasswordVisibility()"></span>

<style>
    .hide-eye {
        display: inline-block;
    }
    .eye-icon {
        cursor: pointer;
        position: relative;
        top: 5px; /* 根据实际需求调整位置 */
    }
    .eye-icon:before {
        content: "";
        width: 20px; /* 图标宽度 */
        height: 20px; /* 图标高度 */
        border-radius: 50%; /* 圆角 */
        background-color: white;
        transition: background-color 0.3s ease;
    }
    .eye-icon:hover:before {
        background-color: grey; /* 鼠标悬停效果 */
    }
    .eye-icon.eye-open:before {
        background-image: url('path/to/unlock-icon.png'); /* 显示密码时的图标 */
    }
    .eye-icon.eye-close:before {
        background-image: url('path/to/eye-icon.png'); /* 隐藏密码时的图标 */
    }
</style>

<script>
function togglePasswordVisibility() {
    var input = document.getElementById('passwordInput');
    if (input.type === 'password') {
        input.type = 'text';
        document.querySelector('.eye-icon').classList.add('eye-open');
    } else {
        input.type = 'password';
        document.querySelector('.eye-icon').classList.remove('eye-open');
    }
}
</script>

在这个例子中，“眼”图标通常是关闭状态（显示密码），当用户点击时，JavaScript函数`togglePasswordVisibility()`会改变密码输入框的`type`属性，同时更改图标的状态。确保替换`url('path/to/...')`为你实际的图标路径。