html+css+js下拉列表小三角

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<linkrel="stylesheet"type="text/css"href="dist/css/bootstrap.min.css">

　　<scriptsrc="jquery-3.2.1.min.js"type="text/javascript"></script>

　　<scriptsrc="dist/js/bootstrap.min.js"type="text/javascript"></script>

　　<styletype="text/css">

　　.zijisanjiclass{

　　width:220px;

　　border:1pxsolidrgba(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:7pxsolidrgba(0,0,0,.15);

　　}

　　.datepicker-select-dropdown:before{

　　border-left:7pxsolidtransparent;

　　border-right:7pxsolidtransparent;

　　border-bottom:7pxsolidrgba(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:6pxsolid#fff;

　　}

　　.datepicker-select-dropdown:after{

　　border-left:6pxsolidtransparent;

　　border-right:6pxsolidtransparent;

　　border-bottom:6pxsolid#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:1pxsolid#efefef;

　　}

　　.form.form-bordered.form-group{

　　margin:0;

　　border-bottom:1pxsolid#efefef;

　　}

　　</style>

　　</head>

　　<bodyclass="page-header-fixedpage-sidebar-closed-hide-logopage-content-white">

　　<pclass="page-wrapper">

　　<c:importurl="../header.jsp"></c:import>

　　<pclass="clearfix"></p>

　　<pclass="page-container">

　　<pclass="page-sidebar-wrapper">

　　<pclass="page-sidebarnavbar-collapsecollapse">

　　<c:importurl="../menu.jsp"></c:import>

　　</p>

　　<pclass="page-content-wrapper">

　　<pclass="page-content"id="mainBodyId">

　　<pclass="page-bar">

　　<ulclass="page-breadcrumb">

　　<li>

　　<ahref="index.html">首页</a>

　　<iclass="fafa-circle"></i>

　　</li>

　　</ul>

　　</p>

　　<pclass="row">

　　<pclass="col-md-12">

　　<pclass="portletlightportlet-fitportlet-datatablebordered">

　　<pclass="portlet-body">

　　<pclass="table-container">

　　<tableclass="tabletable-stripedtable-borderedtable-hovertable-checkable"id="datatable_ajax_user_info">

　　<thead>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="heading">

　　<thstyle="width:5%;">ID</th>

　　<thstyle="width:5%;">姓名</th>

　　<thstyle="width:5%;">年龄</th>

　　<thstyle="width:5%;">性别</th>

　　<thstyle="width:5%;">出生日期</th>

　　<thstyle="width:5%;">民族</th>

　　<thstyle="width:5%;">身高(cm)</th>

　　<thstyle="width:5%;">体重(Kg)</th>

　　<thstyle="width:5%;">学历</th>

　　<thstyle="width:15%;">操作</th>

　　</tr>

　　<trrole="row"class="filter">

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userInfoId">

　　</td>

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userName">

　　</td>

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userAge">

　　</td>

　　<td>

　　<selectclass="form-controlform-filter"style="height:30px;padding:4px12px;">

　　<optionvalue="男">男</option>

　　<optionvalue="女">女</option>

　　<optionvalue="其他">其他</option>

　　</select>

　　</td>

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userBirthday"id="userBirthdayid">

　　</td>

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userNations">

　　</td>

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userHight">

　　</td>

　　<td>

　　<inputtype="text"class="form-controlform-filterinput-sm"name="userWeight">

　　</td>

　　<td>

　　<selectclass="form-controlform-filter"style="height:30px;padding:4px12px;">

　　<optionvalue="博士">博士</option>

　　<optionvalue="硕士">硕士</option>

　　<optionvalue="本科">本科</option>

　　<optionvalue="专科">专科</option>

　　<optionvalue="高中">高中</option>

　　<optionvalue="中专">中专</option>

　　<optionvalue="初中">初中</option>

　　<optionvalue="小学">小学</option>

　　</select>

　　</td>

　　<td>

　　<pclass="margin-bottom-5">

　　<buttonclass="btnbtn-smgreenbtn-outlinefilter-submitmargin-bottom">

　　<iclass="fafa-search"></i>Search</button><buttonclass="btnbtn-smredbtn-outlinefilter-cancel">

　　<iclass="fafa-times"></i>Reset</button>

　　</p>

　　</td>

　　</tr>

　　</thead>

　　</table>

　　</p>

　　<c:importurl="../bottom.jsp"></c:import>

　　</p>

　　<pid="zijixiede"class="zijisanjiclassdatepicker-select-dropdowndatepicker-select-orient-left">

　　<pclass="form"style="border:1pxsolid#e7ecf1!important;">

　　<formclass="form-horizontalform-bordered">

　　<pclass="form-group">

　　<labelclass="control-labelcol-md-3">年</label>

　　<pclass="col-md-9">

　　<selectclass="form-controlform-filter">

　　<optionvalue="">请选择</option>

　　</select>

　　</p>

　　<pclass="form-group">

　　<labelclass="control-labelcol-md-3">月</label>

　　<pclass="col-md-9">

　　<selectclass="form-controlform-filter">

　　<optionvalue="">请选择</option>

　　</select>

　　</p>

　　<pclass="form-group">

　　<labelclass="control-labelcol-md-3">日</label>

　　<pclass="col-md-9">

　　<selectclass="form-controlform-filter">

　　<optionvalue="">请选择</option>

　　</select>

　　</p>

　　<pclass="form-group">

　　<pclass="col-md-11">

　　<pclass="btnbtn-defaultquedingbtn">确定</p>

　　</p>

　　</form>

　　</p>

　　<pclass="quick-nav-overlay"></p>

　　jQuery(document).ready(function(){

　　$("#userBirthdayid").focus(function(){

　　//varoffset=this.component?this.component.parent().offset():this.element.offset();

　　varoffset=$(this).offset();

　　console.info(offset);

　　varpaddingTop=$("#zijixiede").css('padding-top');

　　console.info(paddingTop);

　　varheight=$(this).outerHeight(false);

　　console.info(height);

　　varwidth=$(this).outerWidth(false);

　　console.info(width);

　　varscrollTop=$(document).scrollTop();

　　console.info(scrollTop);

　　varouterHeight=$("#zijixiede").outerHeight();

　　console.info(outerHeight);

　　vartop_overflow=-scrollTop+offset.top-outerHeight;

　　console.info(top_overflow);

　　varyorient=top_overflow<0?'bottom':'top';

　　$("#zijixiede").addClass('datepicker-select-orient-'+yorient);

　　vartop=offset.top;

　　if(yorient==='top')

　　top-=outerHeight+parseInt(paddingTop);

　　else

　　top+=height;

　　varleft=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("拉克建档立卡京东方拉克");

　　//returnfalse;

　　});

　　</script>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55015.shtml