本篇文章主要介绍html+css+js下拉列表小三角，感兴趣的朋友参考下，希望对大家有所帮助。

gadf

.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;

}

• 首页

ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作 ID 姓名 年龄 性别 出生日期 民族 身高(cm) 体重(Kg) 学历 操作

男

女

其他

博士

硕士

本科

专科

高中

中专

初中

小学

Search

Reset

年

请选择

请选择

请选择

请选择

请选择

请选择

请选择

请选择

请选择

请选择

月

请选择

请选择

请选择

请选择

请选择

请选择

日

请选择

请选择

请选择

请选择

请选择

确定

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;

});

});

相关推荐：