html+css+js下拉列表小三角
互联网
18-5-16
本篇文章主要介绍html+css+js下拉列表小三角，感兴趣的朋友参考下，希望对大家有所帮助。
<!DOCTYPE html> <html> <head> <title>gadf</title> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"> <script src="jquery-3.2.1.min.js" type="text/javascript"></script> <script src="dist/js/bootstrap.min.js" type="text/javascript"></script> <style type="text/css"> .zijisanjiclass{ width: 220px; border: 1px solid rgba(0,0,0,.15); background-color: #fff; padding: 10px; top :0px; position: absolute; } .datepicker-select-dropdown.datepicker-select-orient-top:before { bottom: -7px; left: 6px; border-bottom: 0; border-top: 7px solid rgba(0,0,0,.15); } .datepicker-select-dropdown:before { border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(0,0,0,.15); border-bottom-color: rgba(0,0,0,.2); } .datepicker-select-dropdown:after, .datepicker-select-dropdown:before { content: ''; display: inline-block; border-top: 0; position: absolute; } .datepicker-select-dropdown.datepicker-select-orient-top:after { bottom: -6px; left: 7px; border-bottom: 0; border-top: 6px solid #fff; } .datepicker-select-dropdown:after { border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; } .datepicker-select-dropdown.datepicker-select-orient-bottom:after { top: -6px; } .datepicker-select-dropdown.datepicker-select-orient-bottom:before { top: -7px; } .form .form-bordered .form-group>p { border-left: 1px solid #efefef; } .form .form-bordered .form-group { margin: 0; border-bottom: 1px solid #efefef; } </style> </head> <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white"> <p class="page-wrapper"> <c:import url="../header.jsp"></c:import> <p class="clearfix"> </p> <p class="page-container"> <p class="page-sidebar-wrapper"> <p class="page-sidebar navbar-collapse collapse"> <c:import url="../menu.jsp"></c:import> </p> </p> <p class="page-content-wrapper" > <!-- BEGIN CONTENT BODY --> <p class="page-content" id="mainBodyId"> <p class="page-bar"> <ul class="page-breadcrumb"> <li> <a href="index.html">首页</a> <i class="fa fa-circle"></i> </li> </ul> </p> <p class="row"> <p class="col-md-12"> <p class="portlet light portlet-fit portlet-datatable bordered"> <p class="portlet-body"> <p class="table-container"> <table class="table table-striped table-bordered table-hover table-checkable" id="datatable_ajax_user_info"> <thead> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="heading"> <th style="width:5%;"> ID </th> <th style="width:5%;"> 姓名 </th> <th style="width:5%;"> 年龄 </th> <th style="width:5%;"> 性别 </th> <th style="width:5%;"> 出生日期 </th> <th style="width:5%;"> 民族 </th> <th style="width:5%;"> 身高(cm) </th> <th style="width:5%;"> 体重(Kg) </th> <th style="width:5%;"> 学历 </th> <th style="width:15%;"> 操作 </th> </tr> <tr role="row" class="filter"> <td> <input type="text" class="form-control form-filter input-sm" name="userInfoId"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userName"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userAge"> </td> <td> <select class="form-control form-filter" style="height: 30px;padding: 4px 12px;"> <option value="男">男</option> <option value="女">女</option> <option value="其他">其他</option> </select> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userBirthday" id="userBirthdayid"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userNations"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userHight"> </td> <td> <input type="text" class="form-control form-filter input-sm" name="userWeight"> </td> <td> <select class="form-control form-filter" style="height: 30px;padding: 4px 12px;"> <option value="博士">博士</option> <option value="硕士">硕士</option> <option value="本科">本科</option> <option value="专科">专科</option> <option value="高中">高中</option> <option value="中专">中专</option> <option value="初中">初中</option> <option value="小学">小学</option> </select> </td> <td> <p class="margin-bottom-5"> <button class="btn btn-sm green btn-outline filter-submit margin-bottom"> <i class="fa fa-search"></i> Search</button> <button class="btn btn-sm red btn-outline filter-cancel"> <i class="fa fa-times"></i> Reset</button> </p> </td> </tr> </thead> <tbody> </tbody> </table> </p> </p> </p> </p> </p> </p> </p> </p> <c:import url="../bottom.jsp"></c:import> </p> <p id="zijixiede" class="zijisanjiclass datepicker-select-dropdown datepicker-select-orient-left"> <p class="form" style="border: 1px solid #e7ecf1!important;"> <form class="form-horizontal form-bordered"> <p class="form-group"> <label class="control-label col-md-3">年</label> <p class="col-md-9"> <select class="form-control form-filter"> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> </select> </p> </p> <p class="form-group"> <label class="control-label col-md-3">月</label> <p class="col-md-9"> <select class="form-control form-filter"> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> </select> </p> </p> <p class="form-group"> <label class="control-label col-md-3">日</label> <p class="col-md-9"> <select class="form-control form-filter"> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> <option value="">请选择</option> </select> </p> </p> <p class="form-group"> <p class="col-md-11"> <p class="btn btn-default quedingbtn" >确定</p> </p> </p> </form> </p> </p> <p class="quick-nav-overlay"></p> <script> jQuery(document).ready(function(){ $("#userBirthdayid").focus(function(){ //var offset = this.component ? this.component.parent().offset() : this.element.offset(); var offset = $(this).offset(); console.info(offset); var paddingTop = $("#zijixiede").css('padding-top'); console.info(paddingTop); var height = $(this).outerHeight(false); console.info(height); var width = $(this).outerWidth(false); console.info(width); var scrollTop = $(document).scrollTop(); console.info(scrollTop); var outerHeight = $("#zijixiede").outerHeight(); console.info(outerHeight); var top_overflow = -scrollTop + offset.top - outerHeight; console.info(top_overflow); var yorient = top_overflow < 0 ? 'bottom' : 'top'; $("#zijixiede").addClass('datepicker-select-orient-' + yorient); var top = offset.top; if (yorient === 'top') top -= outerHeight + parseInt(paddingTop); else top += height; var left = offset.left; console.info(left); $("#zijixiede").css({ top: top, left: left }); $("#zijixiede").show(); }); $(document).mousedown(function(e){ if(!($("#zijixiede").find(e.target).length)&&!($("#userBirthdayid").is(e.target))) $("#zijixiede").hide(); }); $(".quedingbtn").click(function(){ console.info("拉克建档立卡京东方拉克"); //return false; }); }); </script> </body> </html>相关推荐：
关于html下拉框中optGroup标签的一个bug修复
html下拉框问题_html/css_WEB-ITnose
改变HTML下拉框SELECT选项的多种方法_HTML/Xhtml_网页制作
以上就是html+css+js下拉列表小三角的详细内容，更多内容请关注技术你好其它相关文章！
免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场
相关资讯
扫码关注公众号
技术文章 / 下载软件
趣味内容 / 专业带飞
