Home >Web Front-end >HTML Tutorial >html+css+js drop-down list triangle
html+css+js drop-down list triangle
- 墨辰丷Original
- 2018-05-16 09:59:435060browse
This article mainly introduces the html css js drop-down list triangle. Interested friends can refer to it. I hope it will be helpful to everyone.
<!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>Related recommendations:
About a bug fix for the optGroup tag in the html drop-down box
html drop-down box problem_html/css_WEB -ITnose
Multiple ways to change the SELECT option of the HTML drop-down box_HTML/Xhtml_Web page production
The above is the detailed content of html+css+js drop-down list triangle. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to customize tags in htmlNext article：How to customize tags in html