当前位置:Gxlcms > html代码 > html+css+js下拉列表小三角

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

时间:2021-07-01 10:21:17 帮助过:6人阅读

本篇文章主要介绍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下拉列表小三角的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行