【记录】改select下拉框

最新推荐文章于 2022-11-22 07:00:00 发布

蛸-

最新推荐文章于 2022-11-22 07:00:00 发布

阅读量233

点赞数 1

分类专栏：记录文章标签： html css css3

本文链接：https://blog.csdn.net/qq_45768703/article/details/122066620

版权

记录专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果图：

在这里插入图片描述

HTML：

<div id="divSelect">
   <a title="请选择一项身份"><div>请选择您的身份</div></a>
   <ul style="display: none;">
      <li><a href="javascript:;" selectid="高校老师/学生">高校老师/学生</a></li>
      <li><a href="javascript:;" selectid="企业职员">企业职员</a></li>
      <li><a href="javascript:;" selectid="个人用户">个人用户</a></li>
      <li><a href="javascript:;" selectid="其他">其他</a></li>
   </ul>
</div>
<input type="hidden" value="" id="identity" name="identity" required="" msg="请选择您的身份" must="required" placeholder="*身份" rule_name="身份" />

CSS：

#divSelect {
  width: 100%;
  cursor: pointer;
  position: relative;
}

#divSelect div {
  display: block;
  margin-top: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.25rem;
  width: 100%;
  height: 3.125rem;
  line-height: 3.125rem;
  background-color: #ffffff;
  border: solid 1px #dcdcdc;
  border-radius: 0.313rem;
  background: url(../../public/images/page_apply_xiangxia.png) no-repeat center;
  background-size: auto 14px;
  color: #757575;
  background-position-x: calc(100% - 1.25rem);
  letter-spacing: 1px;
  margin-bottom: 0;
}
#divSelect div:hover{
  border-color: #333;
}

#divSelect ul {
  list-style-type: disc;
  border-radius: 0.313rem;
  margin: 0;
  padding: 0;
  border: 1px solid #dcdcdc;
  background-color: #fff;
  position: absolute;
  width: 100%;
}

#divSelect ul li {
  padding: 0 1.25rem;
  height: 3.125rem;
  line-height: 3.125rem;
  text-align: -webkit-match-parent;
  clear: both;
}

#divSelect ul:hover {
  border-color: #333;
}

#divSelect ul li:hover {
  border-radius: 0.313rem;
  background-color: #E6213A;
  color: #fff;
}

#divSelect ul li a {
  display: block;
  height: 100%;
  color: #333333;
  text-decoration: none;
}

#divSelect ul li a:hover {
  color: #fff;
}

JS：

$(function () {
	$.divSelect("#divSelect", "#identity");
});
jQuery.divSelect = function (divSelectid, identityid) {
	var identity = $(identityid);
	$(divSelectid + " div").click(function () {
		var ul = $(divSelectid + " ul");
		if (ul.css("display") == "none") {
			ul.slideDown("fast");
		} else {
			ul.slideUp("fast");
		} this.style.cssText = 'color: #000';
	});
	$(divSelectid + " ul li a").click(function () {
		var txt = $(this).text();
		$(divSelectid + " div").html(txt);
		var value = $(this).attr("selectid");
		identity.val(value);
		$(divSelectid + " ul").hide();
	});
};