原生JS实现登录框邮箱提示原生JS实现登录框邮箱提示

本文分享一个由原生JS实现的注册或登录时，输入邮箱时下拉提示效果，效果如下：

实现代码如下：

原生JS实现登录框提示* {margin: 0; padding: 0; } body {font: 12px/1.125 Arial, Helvetica, sans-serif; } li {list-style: none; } #login {width: 252px; height: 385px; /* 彩色背景图 */background: url(images/0.jpg) no-repeat; margin: 20px auto; position: relative; } .detail {margin: 0 0 5px 30px; position: relative; top: 110px; } .detail input {color: #999999; border: 1px solid #74C8E5; border-radius: 3px 3px 3px 3px; height: 15px; line-height: 14px; padding: 8px 5px 7px; width: 184px; } #suggest {background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; left: 30px; margin: 0; overflow: hidden; padding: 0; position: absolute; text-align: left; top: 142px; visibility: visible; width: 194px; z-index: 1; display: none; } .note,.item {clear: both; color: #999999; cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0 1px; padding: 0 5px; white-space: nowrap; } .active {white-space: nowrap; clear: both; color: rgb(153, 153, 153); cursor: pointer; font-size: 12px; height: 20px; line-height: 20px; list-style: none outside none; margin: 0pt 1px; padding: 0pt 5px; background: none repeat scroll 0% 0% rgb(232, 244, 252); }
请选择邮箱类型
@sina.com
@163.com
@qq.com
@126.com
@vip.sina.com
@sina.cn
@hotmail.com
@gmail.com
@sohu.com
@yahoo.cn
@139.com
@wo.com.cn
@189.cn