大家好,又见面了,我是你们的朋友全栈君。
自带的select下拉菜单美观度实在不怎么样,并且不容易美化,当然我们可以模拟实现select下拉菜单,但是代码稍显复杂,不过也可以通过简单的CSS实现此效果,下面通过实例简单作一下介绍。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端学习扣qun:731771211 每日分享技术,学术交流</title>
<style type="text/css">
.select_style{
width:240px;
height:30px;
overflow:hidden;
background:url(mytest/demo/bg.jpg) no-repeat 215px;
border:1px solid #ccc;
-moz-border-radius:5px; /* Gecko browsers */
-webkit-border-radius:5px; /* Webkit browsers */
border-radius:5px;
margin:150px;
}
.select_style select{
padding:5px;
background:transparent;
width:268px;
font-size:16px;
border:none;
height:30px;
-webkit-appearance:none; /*for Webkit browsers*/
}
</style>
</head>
<body>
<div class="select_style">
<select name="select">
<option>星期1</option>
<option>星期2</option>
<option selected>星期3</option>
<option>星期4</option>
</select>
</div>
</body>
</html>
以上代码实现了实现了select下拉框美化效果,当然这里也谈不上美观,因为在这里只是介绍一下它的实现原理,以供大家改造之用,下面简单介绍一下它的实现过程:
实现原理:
其实select下拉菜单美化最让人蛋疼的地方就是向下的箭头,在这里我们在select下拉菜单外面套了一个div,并且div的宽度小于select下拉菜单的宽度,这样的目的是将select下来菜单的箭头给遮挡,然后再给次div设置一个背景图片作为下拉箭头,这样就实现了我们想要的效果。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/128771.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...