美化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. 冰冻三尺非一日之寒--web框架Django

    1.JS 正则    test   - 判断字符串是否符合规定的正则        rep = /\d+/;        rep.test("asdfoiklfasdf89asdfasdf ...

  2. 如何运行Spark程序

    [hxsyl@CentOSMaster spark-2.0.2-bin-hadoop2.6]# ./bin/spark-submit --class org.apache.spark.examples ...

  3. Winform 后台将指定的控件集合添加到制定容器中

    /// <summary> /// 把按钮按照行数分割排列 /// </summary> /// <param name="ControlArry"& ...

  4. PHP之：序列化和反序列化-serialize()和unserialize()

    撰写日期:2016-7-7 10:56:40 参考PHP在线手册(php.net):http://php.net/manual/zh/function.serialize.php 1.序列化 seri ...

  5. NSString属性什么时候用copy，什么时候用strong?

           我们在声明一个NSString属性时,对于其内存相关特性,通常有两种选择(基于ARC环境):strong与copy.那这两者有什么区别呢?什么时候该用strong,什么时候该用copy呢 ...

  6. php实现数据粘性例子

    php实现数据粘性例子 在填表单的时候,有时候会出现表单未填完就提交的情况,这时候若是想要回到原来的表单页面,一般之前填的内容都会消失掉. 故使用PHP实现回到原来表单但是填写数据不消失,代码

  7. Navicat Premium 的常用功能

    1.快捷键 1.1. F8 快速回到当前对象列表 1.2. Ctrl + q 打开查询界面 1.3. Ctrl + d 快速修改当前的表结构 1.4. Ctrl + r 运行当前查询界面里面的 sql ...

  8. JVM:查看java内存情况命令

    jmap (linux下特有,也是很常用的一个命令) 观察运行中的jvm物理内存的占用情况. 参数如下: -heap :打印jvm heap的情况 -histo: 打印jvm heap的直方图.其输出 ...

  9. Nginx+Php Windows部署

    http://www.cnblogs.com/huayangmeng/archive/2011/06/15/2081337.html 一定要以下面的形式启动php-cgi php-cgi.exe -b ...

  10. Windows快捷键

    一.常见用法: F1 显示当前程序或者windows的帮助内容. F2 当你选中一个文件的话,这意味着“重命名” F3 当你在桌面上的时候是打开“查找:所有文件” 对话框 F10或ALT 激活当前程序 ...