css 给输入框设置下拉弹窗

在Web开发中，输入框是一种常见的用户交互组件。如果要给输入框设置下拉弹窗，可以使用CSS实现。

首先，需要为输入框设置一个下拉箭头的背景图片。例如：

input {
      background-image: url("dropdown-arrow.png");
      background-repeat: no-repeat;
      background-position: right center;
}

接下来，需要为下拉弹窗设置样式。可以使用伪元素 ::before 或 ::after 来模拟弹窗。例如：

input::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      background-color: #fff;
      border: 1px solid #ccc;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      z-index: 1;
      display: none;
}

上述代码中，伪元素 ::after 的 content 属性为空字符串，使其成为一个空元素。设置其 position 为 absolute ，将其定位在输入框下方100%的位置。设置其 width 为100%，使其与输入框一样宽。设置其背景颜色为白色，边框为灰色，阴影为黑色，以使其看起来像是一个弹窗。

然后，通过 JavaScript 监听输入框的 focus 和 blur 事件，在输入框获取焦点时显示弹窗，在输入框失去焦点时隐藏弹窗。例如：

input.addEventListener("focus", function() {
      this.nextElementSibling.style.display = "block";
}
    );
input.addEventListener("blur", function() {
      this.nextElementSibling.style.display = "none";
}
    );
    

上述代码中，通过 nextElementSibling 属性获取到输入框的伪元素 ::after，然后通过设置其 display 属性来控制其显示和隐藏。

通过以上的代码和样式设置，就可以为输入框设置一个下拉弹窗了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！