css下拉框变化输入框变化

CSS下拉框是一个常见的网页元素，它可以提供多个选项供用户选择。但是有时候，我们希望用户能够在下拉框中输入文本，或者在输入框中下拉选择一些预设的选项。这时候，我们可以使用CSS来实现下拉框和输入框的变化效果。

/* 实现下拉框变化 */
.dropdown {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 30px;
  border: 1px solid gray;
}

.dropdown select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  appearance: none; /* 隐藏默认的下拉箭头 */
}

.dropdown:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid gray;
  transform: translateY(-50%);
  pointer-events: none; /* 防止遮挡下拉框 */
}

/* 实现输入框变化 */
.input {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 30px;
  border: 1px solid gray;
}

.input input[type="text"] {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

.input:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid gray;
  transform: translateY(-50%);
  pointer-events: none; /* 防止遮挡输入框 */
} 

在上面的代码中，我们通过设置下拉框和输入框的容器元素的伪类来实现样式的变化。对于下拉框，我们首先设置了容器元素的宽度和高度，并将其样式设置为relative，使得后面设置的伪类可以使用position:absolute来定位。然后，我们隐藏了下拉框默认的下拉箭头，通过设置伪类:after来模拟一个箭头，并将其放置在容器元素的右边，从而实现了下拉框的变化效果。

对于输入框，我们同样设置了容器元素的宽度和高度，并将其样式设置为relative。然后，我们通过设置伪类:after来模拟一个向下的箭头，并将其放置在容器元素的右边。这样，当用户点击箭头时，就会显示一个下拉框，并在输入框中显示用户的选择。

总之，通过CSS的样式设置，我们可以轻松地实现下拉框和输入框的变化效果，从而提高网站的用户体验。