下拉框美化

最新推荐文章于 2024-09-26 13:58:48 发布

杨哥杨哥万万岁

最新推荐文章于 2024-09-26 13:58:48 发布

阅读量445

点赞数

分类专栏： css 文章标签： jquery css html5 javascript css3

本文链接：https://blog.csdn.net/wozhenhaokan/article/details/119674481

版权

在维护一个老项目时，由于老板对下拉框的样式不满意，本文将介绍如何使用jQuery进行简单的下拉框美化。虽然没有采用CSS伪元素，但通过jQuery和CSS3也能实现不错的效果。

摘要由CSDN通过智能技术生成

一个老掉牙的项目需要维护，老板说下拉框不好看，然后拾起了好久没用的jQuery

没有用伪元素之类的，就简单写了写勿喷！

长这样：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.selectContent{
				text-align: center;
			  width: 250px;
			  height: 34px;
				border-radius: 20px;
			  background: #fff;
			  padding: 6px 0;
				box-sizing: border-box;
			  outline: none;
			  color: #fff;
				background-color: #283258;
				position: relative;
			}
			.select_options{
				display: none;
				position: absolute;
				top: 34px;
				width: 100%;
				left: 0;
				color: #fff;
				font-size: 14px;
				tex