美化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. import renumber.py in pymol

    cp renumber.py /usr/local/lib/python2.7/dist-packages/pymol import renumber or run /path/to/renumber ...

  2. 【BZOJ-1656】The Grove 树木 BFS + 射线法

    1656: [Usaco2006 Jan] The Grove 树木 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 186  Solved: 118[Su ...

  3. JavaScript系列文章：详解正则表达式之二

    在上一篇文章中我们讲了正则表达式的基本用法,接下来博主想聊聊其中的细节,今天就从正则修饰符开始吧. 正则修饰符又称为正则标记(flags),它会对正则的匹配规则做限定,进而影响匹配的最终结果.在上次的 ...

  4. 【Beta】Scrum09

    Info 考试周,暂停工作 时间:2016.12.26 21:35 时长:20min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.12.31 21:30 Task Rep ...

  5. linux下安装jdk

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 Java -version ,会有下面的信息: Javaversio ...

  6. Think twice before doing~

    1.遇到任何矛盾,对事不对人. 2.接到朋友等人的求助电话后,一定要先问清楚对方有什么事情,然后再告诉他(她)能不能帮她(他). 3.如果没有十足的把握和必要,就不要轻易说假话. 4.少提自己的私事, ...

  7. [原创] Delphi小工具(Windows资源管理器右键菜单扩展）

    两个小工具 1. 项目临时文件清理 2. Android Ndk 编译 c/c++ jni 源码工具. 下载后,点击Reg.bat就可以完成注册安装.不需要时点击 UnReg.Bat 就可以删除菜单. ...

  8. PHP判断sql语句是否执行成功

    关于这个问题的分析: 1. 这个SQL 语法是否错误? 2. 如果没错SQL是否对数据库影响了? 综上改为以下代码: $query = mysql_query("delete from `y ...

  9. leetcode 111 minimum depth of binary tree

    problem description: Given a binary tree, find its minimum depth. The minimum depth is the number of ...

  10. excel工具类

    excel工具类 import com.iport.framework.util.ValidateUtil; import org.apache.commons.lang3.StringUtils; ...