选择输入控件,既可以输入又可以选择的控件

来源:互联网 发布:北京大学 奖教金 知乎 编辑:程序博客网 时间:2024/05/21 15:44

即拿即用,复制粘贴,直接使用。

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style type="text/css">            .div-wrap{                position: relative;                margin-bottom: 20px;            }            .select-wrap{                overflow: hidden;                margin-left: 100px;                width: 18px;            }            .select{                margin-left: -100px;                border: 1px solid #ccc;                border-radius: 5px;                width: 118px !important;                height: 32px !important;            }            .input{                position: absolute;                top: 1px;                left: 1px;                border: none;                border-top-left-radius: 5px;                border-bottom-left-radius: 5px;                padding: 0 5px;                width: 90px;                height: 30px;                color: #212121;                text-align: center;                font-size: 16px;            }        </style>    </head>    <body>        <div class='div-wrap'>            <span class='select-wrap'>                <select class='select' onchange='this.parentNode.nextSibling.value=this.value'>                    <option>111</option>                    <option>222</option>                    <option>333</option>                </select>            </span>            <input class='input' value='111'>        </div>    </body></html>