CSS 样式响应式密码输入眼睛 - CSS

在现代网站设计中，响应式设计已经成为一个标准。随着越来越多的用户使用手机和平板电脑浏览网站，设计师和开发人员必须考虑如何使他们的网站在所有设备上都能够完美地运行。

在这篇文章中，我们将介绍如何使用 CSS 样式创建一个响应式密码输入眼睛。

实现思路

在密码输入框中添加一个眼睛图标，并在点击该图标时切换输入框中密码是否可见。同时，使用 CSS 媒体查询，为不同大小的屏幕定制不同的样式。

HTML 结构

<div class="password-input">
  <input type="password" />
  <div class="eye"></div>
</div>

这是一个密码输入框的基本结构，其中密码输入框使用 type="password" 属性来保护用户的隐私。我们还添加了一个 div 元素作为眼睛图标的容器，并在后续的 CSS 中进行样式处理。

CSS 样式

基本样式

在样式表中，我们将为密码输入框和眼睛图标添加基本样式。

.password-input {
  position: relative;
}

.password-input input[type="password"] {
  padding-right: 30px;
}

.password-input .eye {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('eye.svg');
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

首先，我们将密码输入框的容器设置为相对定位。然后，对密码输入框的样式进行了微调，以留出空间容纳图标。最后，为眼睛图标添加样式：

• 将其定位在输入框的右侧；
• 设置其垂直居中；
• 设置其宽度和高度为 20px；
• 背景图像是一个 SVG 文件，以便能够在不同大小的屏幕上完美显示；
• 设置鼠标指针为“手型”。

点击事件

现在，我们需要通过 JavaScript 来实现切换密码是否可见的功能。

.password-input input[type="password"].hidden-password {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  -ms-text-security: disc;
  -o-text-security: disc;
  text-security: disc;
}

首先，我们在密码输入框上添加 .hidden-password 类，用于切换密码是否可见。然后，使用 CSS 文本安全属性（-webkit-text-security、-moz-text-security、-ms-text-security、-o-text-security、text-security）将密码字符替换为圆圈。

const input = document.querySelector('.password-input input[type="password"]');
const eye = document.querySelector('.password-input .eye');
let visible = false;

eye.addEventListener('click', () => {
  visible = !visible;
  input.type = visible ? 'text' : 'password';
  eye.classList.toggle('show-password');
});

input.addEventListener('input', () => {
  if (input.value !== '') {
    eye.style.display = 'block';
  } else {
    eye.style.display = 'none';
  }
});

我们使用 document.querySelector 方法来获取密码输入框和眼睛图标，并创建 visible 变量来存储密码是否可见。然后，我们在眼睛图标上添加一个点击事件侦听器，以便在单击时切换密码的可见性。我们还添加了一个事件监听器，以便在输入框中输入内容时显示或隐藏眼睛图标。

响应式设计

我们将使用 CSS 媒体查询来确保在不同大小的屏幕上，眼睛图标的样式与输入框的样式保持一致。

@media screen and (max-width: 480px) {
  .password-input input[type="password"] {
    padding-right: 40px;
  }

  .password-input .eye {
    right: 10px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .password-input input[type="password"] {
    padding-right: 50px;
  }
  
  .password-input .eye {
    right: 15px;
  }
}

@media screen and (min-width: 768px) {
  .password-input input[type="password"] {
    padding-right: 60px;
  }
  
  .password-input .eye {
    right: 20px;
  }
}

我们创建了三个媒体查询，分别适用于以下条件：

• 屏幕宽度不超过 480 像素；
• 屏幕宽度在 480 到 767 像素之间；
• 屏幕宽度超过 768 像素。

在每个查询中，我们都微调了输入框和眼睛的样式。也就是说，随着屏幕大小的变化，眼睛图标不会变得太大或太小。

完整代码

<div class="password-input">
  <input type="password" />
  <div class="eye"></div>
</div>

<style>
.password-input {
  position: relative;
}

.password-input input[type="password"] {
  padding-right: 30px;
}

.password-input .eye {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url('eye.svg');
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.password-input input[type="password"].hidden-password {
  -webkit-text-security: disc;
  -moz-text-security: disc;
  -ms-text-security: disc;
  -o-text-security: disc;
  text-security: disc;
}

@media screen and (max-width: 480px) {
  .password-input input[type="password"] {
    padding-right: 40px;
  }

  .password-input .eye {
    right: 10px;
  }
}

@media screen and (min-width: 480px) and (max-width: 767px) {
  .password-input input[type="password"] {
    padding-right: 50px;
  }
  
  .password-input .eye {
    right: 15px;
  }
}

@media screen and (min-width: 768px) {
  .password-input input[type="password"] {
    padding-right: 60px;
  }
  
  .password-input .eye {
    right: 20px;
  }
}
</style>

<script>
const input = document.querySelector('.password-input input[type="password"]');
const eye = document.querySelector('.password-input .eye');
let visible = false;

eye.addEventListener('click', () => {
  visible = !visible;
  input.type = visible ? 'text' : 'password';
  eye.classList.toggle('show-password');
});

input.addEventListener('input', () => {
  if (input.value !== '') {
    eye.style.display = 'block';
  } else {
    eye.style.display = 'none';
  }
});
</script>

总结

在本文中，我们使用 CSS 样式和 JavaScript 代码创建了一个响应式密码输入眼睛。我们学习了以下内容：

• 如何通过 CSS 样式为密码输入框和眼睛图标创建基本样式；
• 如何使用 JavaScript 代码切换密码是否可见；
• 如何使用 CSS 媒体查询为不同大小的屏幕定制不同的样式。

随着越来越多的人使用移动设备进行网站浏览，响应式设计已成为网站开发的标准。为移动设备优化您的网站可以提高用户体验，从而提高转化率。