网站中经常会有模块的下拉框为了方便用户和网站的页面友好需要下拉框按钮既可以下拉选择已经有的属性,又需用户可以自己输入自己需要的数值,这一般会出现电商网站选择产品数量上。
如图所示:
代码如下:需要拿走不用谢
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>可填可选的下拉框</title> <style type="text/css"> .box { width: 100px; height: 21px; clip: rect( 0px, 181px, 20px, 0px ); overflow: hidden; } .selectTT { position: absolute; left: -1px; top: -1px; width: 100px; height: 27px; z-index: 1; cursor: pointer; } .inputTT { position: absolute; z-index: 5; height: 21px; width: 76px; left: -1px; top: -1px; } </style> </head> <body> <div class=box id="afd"> <select name="yjjx" id="yjjx" class="selectTT" onChange="document.getElementById('sbtlInp222').value=this.options[this.selectedIndex].text"> <option value="" selected>全部</option> <option value="SK55-C">SK55-C</option> <option value="SK55SR-3">SK55SR-3</option> <option value="SK60-C">SK60-C</option> </select> <input name="mytext" type="text" class="inputTT" id="sbtlInp222" value="0" size="10"> </div> </body> </html>