美化select，可以实用一个a标签将select嵌套进去，然后将<a>相对定位，在将select绝对定位，美化<a>即可

<!DOCTYPE>

<html>

<head>

    <script type="text/javascript" src="jquery.js"></script>

    <style>

        .sel_mask{                    /*将<a></a>相对定位*/

            position:relative;

            width:200px;

            height:25px;

            background:#24A0D8;

            border-radius: 5px;

            box-shadow:1px 1px 5px #169BD5;

            display:inline-block;

            text-decoration: none;

        }

        .sel_mask:hover{         /*添加hover效果*/

            background:#169BD5;

        }

        .sel_mask select{        /*以相同大小将<select></select>绝对定位*/

            top:0px;

            left:0px;

            position:absolute;

            width:200px;

            height:25px;

            opacity:0;

        }

        .sel_mask select option[selected]{

            font-weight:bold

        }

        .sel_mask select option:nth-child(even) {

            background-color:#A7DAEF;

        }

        .sel_mask select option{

            color:#EA5400;

        }

        .sel_mask span{     /*显示内容*/

            position: absolute;

            top:3px;

            left:5px;

            right: 20px;

            display: inline-block;

            color:#fff;

            overflow:hidden;

            text-overflow: ellipsis;

            white-space:nowrap;

        }

        .sel_mask img{          /*箭头图标*/

            display: inline-block;

            position: absolute;

            top:2px;

            right: 5px;

        }

    </style>

</head>

<body>

<a href="javascript:void(0)"  class="sel_mask"><span>请选择</span><img src="arrow_down.png"/>

    <select  class="sel">

        <option>请选择</option>

        <option>选项一</option>

        <option>选项二</option>

        <option>选项三</option>

        <option>选项四</option>

        <option>选项五</option>

        <option>选项六</option>

        <option>选项七</option>

    </select>

</a>

<script>

$(function () {

    $('.sel').change(function () {    // 选择后替换内容并恢复箭头方向

        $('span').html($('.sel').find('option:selected').html());

        $('.sel_mask').find('img').attr('src','arrow_down.png');

    })

    $('.sel').blur(function () {      //什么也不选恢复箭头方向

        $('.sel_mask').find('img').attr('src','arrow_down.png');

    })

    $('.sel').click(function(){     // 点击后更改箭头方向

        $('.sel_mask').find('img').attr('src','arrow_up.png');

    })

})

</script>

</body>

</html>

以下附2张 图片：

           

select样式美化（简单实用）的更多相关文章

  1. 通过css属性hack完成select样式美化，并兼容IE

    最近在重构时遇到了select样式问题,并且需要在不影响语义化的情况下,兼容IE8. 经过一番的百度后始终没有找到合适的纯CSS解决方案,最后换了一下思路,大胆使用了属性hack: 在chrome和F ...

  2. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  3. 简单实用的原生PHP分页类

    一款简单实用的原生PHP分页类,分页按钮样式简洁美观,页码多的时候显示“...”,也是挺多网站用的效果 核心分页代码 include_once("config.php"); req ...

  4. jQuery的几种简单实用效果

    许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang=&qu ...

  5. 简单实用的PHP防注入类实例

    这篇文章主要介绍了简单实用的PHP防注入类实例,以两个简单的防注入类为例介绍了PHP防注入的原理与技巧,对网站安全建设来说非常具有实用价值,需要的朋友可以参考下   本文实例讲述了简单实用的PHP防注 ...

  6. C#_简单实用的翻页

    简单实用的生成翻页HTML辅助类 C# using System.Text; namespace ClassLibrary { /// <summary> /// /// </sum ...

  7. CSS select样式优化 含jquery代码

    CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...

  8. 简单实用的纯CSS百分比圆形进度条插件

    percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...

  9. js jsp 时间 日期 控件 插件 简单 实用

    js时间控件一般都是找网上的用,这东西平常很少涉及到,一用到找起来却烦死人,不是没用就是太复杂,今天向大家推荐一个简单实用的控件,该控件在不断更新,而且有专门的网站对它进行维护,所以值得一看. 先说它 ...

随机推荐

  1. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  2. ORacle修改表列长度

    alter table 表名 modify column_name varchar2(32) alter table 表名 modify (column_name1 varchar(20) defau ...

  3. Django进阶（三）

    ORM 众所周知有很多不同的数据库系统,并且其中的大部分系统都包含Python接口,能够让我们更好的利用它们的功能,而这些系统唯一的缺点就是需要你了解SQL,如果你是一个更愿意操纵Python对象,而 ...

  4. html5存储方式localstorage和sessionStorage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. 区别:localStorage无时间限制,除非主动删除数据,否则永不过期:sessio ...

  5. c语言之I/O函数

    c语言中常用的I/O函数 最常用的字符串的标准I/O函数有getchar().putchar().gets().puts().scanf().printf().fputs().fgets().getc ...

  6. [bzoj2732][HNOI2012]射箭

    Description 沫沫最近在玩一个二维的射箭游戏,如下图所示,这个游戏中的$x$轴在地面,第一象限中有一些竖直线段作为靶子,任意两个靶子都没有公共部分,也不会接触坐标轴.沫沫控制一个位于$(0, ...

  7. linux安装apache

    我的linux是用阿里云上的,版本是CentOS 6.5 apache依赖于apr.apr-util和pcre,所以需要先安装这三个 apr(包含apr.apr-util和apr-iconv)是apa ...

  8. Android InputStream接收 字符串乱码 问题

    各个国家和地区所制定的不同 ANSI 编码标准中,都只规定了各自语言所需的“字符”.比如:汉字标准(GB2312)中没有规定韩国语字符怎样存储.这些 ANSI 编码标准所规定的内容包含两层含义:1. ...

  9. HDU 1796How many integers can you find（容斥原理）

    How many integers can you find Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d ...

  10. How to build a NFS Service

    NFS网络文件系统的服务的配置 1 Preparation Three Linux virtual machines one: to be NFS Service the other two: NFS ...