[分享]css下拉框可以输入框

CSS下拉框是网页设计中常用的组件之一，它能够让用户在一组可选项中选择一个或多个选项。有时候，我们需要让用户输入一些信息，但是又不能让用户随意输入，这时候就需要将下拉框转换为输入框。下面是一个简单的C...

CSS下拉框是网页设计中常用的组件之一，它能够让用户在一组可选项中选择一个或多个选项。有时候，我们需要让用户输入一些信息，但是又不能让用户随意输入，这时候就需要将下拉框转换为输入框。下面是一个简单的CSS代码演示如何实现这个功能。

select {
    width: 150px;
    height: 30px;
    border-radius: 5px;
    border: none;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("down-arrow.png") no-repeat right center;
}

select:focus {
    outline: none;
}

select.custom-select {
    position: relative;
}

select.custom-select input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 0 10px;
    font-size: 16px;
    color: #333;
    background: transparent;
}

select.custom-select select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
} 

首先，我们需要定义一个普通的下拉框样式，使用了一些常见的CSS属性，例如宽度、高度、边框、圆角、字体大小、文本颜色等，以及各种浏览器兼容性前缀，最后使用了一个背景图片来表示下拉箭头。

然后，我们定义了一个自定义的下拉框样式，使用了一个包含两个子元素的容器，分别是一个输入框和一个隐藏的下拉框。把输入框放在下拉框的上面，并设置绝对定位、宽度、高度、边框、字体大小、文本颜色、背景透明度等属性。把下拉框放在输入框的下面，并设置绝对定位、宽度、高度、透明度等属性，同时把其隐藏。

最后，我们需要使用JavaScript来实现输入框和下拉框之间的交互。当用户输入内容时，将输入框的值更新到下拉框中，并将下拉框显示出来。当用户选择下拉框中的某一项时，将该项的值更新到输入框中，并隐藏下拉框。