可输入下拉框,css+js实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <!-- 调节div的width,改变下拉框的宽度 -->
    <div style="position: relative;width: 100px;">
        <span style="margin-left: 100px; width: 18px; overflow: hidden;">
            <select style=" width: 100%; margin-left: -100px;height:25px;border"
            onchange="document.getElementById('js_bank_text').value=this.value">
                <option value="中国银行">中国银行</option>
                <option value="工商银行">工商银行</option>
                <option value="农业银行">农业银行</option>
                <option value="建设银行">建设银行</option>
                <option value="交通银行">交通银行</option>
        </select>
        </span> 
        <input id="js_bank_text" name="openBank"
        style="position: absolute; left: 1px; top: 1px;width:calc(100% - 19px);height:23px;border:none;" />
    </div>         
</body>
</html>

预览地址:http://sandbox.runjs.cn/show/p2udevlz

你可能感兴趣的:(下拉框支持输入实现,可输入下拉框实现)