博客介绍了如何使用简单的CSS实现HTML select下拉菜单的美化，通过在select外包裹div并利用背景图片模拟下拉箭头，从而达到美化效果。
自带的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-appear
最低0.47元/天 解锁文章
扫一扫
4564
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
