原生js实现下拉框功能(支持键盘事件)

前端之家收集整理的这篇文章主要介绍了原生js实现下拉框功能(支持键盘事件)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

话不多说,请看代码

<Meta charset="UTF-8"> 倒计时-多种格式<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>-原生js封装 css-3*/ white-space: -moz-pre-wrap; /*Mozilla,since1999*/ white-space: -pre-wrap; /*Opera4-6*/ white-space: -o-pre-wrap; /*Opera7*/ word-wrap: break-word; /*InternetExplorer5.5+*/ } .example{ padding-top:40px; margin-bottom:90px; } .example .call{ padding:18px 5px; background:#f0f5f8; } .example h2{ padding-top:20px; margin-bottom:7px; } .example table { width:100%; table-layout:fixed; border-collapse: collapse; border-spacing: 0; border: 1px solid #cee1ee; border-left: 0; } .example thead { border-bottom: 1px solid #cee1ee; background-color: #e3eef8; } .example tr { line-height: 24px; font-size: 13px; } .example tr:nth-child(2n) { background-color: #f0f5f8; } .example tr th,.example tr td { border-left: 1px solid #cee1ee; word-break: break-all; word-wrap: break-word; padding:0 10px; font-weight: normal; } .example tr th { color: #555; padding-top: 2px; padding-bottom: 2px; text-align: left; } /*公共*/ .select-container { width: 186px; margin: 80px 0; position: relative; z-index: 10000; } .select-container .select-pose { width: 150px; height: 24px; line-height: 24px; display: block; color: #807a62; cursor: pointer; font-style: normal; padding-left: 4px; padding-right: 30px; border: 1px solid #333333; /* background: url(xjt.png) no-repeat right center; */ } .select-pose:before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 0; height: 0; border-width: 4px; border-style: solid; border-color: #888 transparent transparent transparent; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transform-origin: 50% 25%; -ms-transform-origin: 50% 25%; -moz-transform-origin: 50% 25%; -webkit-transform-origin: 50% 25%; -o-transform-origin: 50% 25%; } .extended.select-pose:before { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } .select-container .select-content { width: 184px; border: 1px solid #333333; background-color: #ffffff; position: absolute; z-index: 20000; margin-top: -1px; display: none; overflow: hidden; } .select-list{ cursor: pointer; height: 24px; line-height: 24px; padding-left: 10px; }

猜你在找的JavaScript相关文章