美化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. BZOJ 4205: 卡牌配对

    4205: 卡牌配对 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 173  Solved: 76[Submit][Status][Discuss] ...

  2. 在页面的el表达式是如何判断null的

    <c:if test="${not empty message}"> <div id="message" class="alert ...

  3. 大数据量冲击下Windows网卡异常分析定位

    背景 mqtt的服务端ActiveMQ在windows上,多台PC机客户端不停地向MQ发送消息. 现象 观察MQ自己的日志data/activemq.log里显示,TCP链接皆异常断开.此时尝试从服务 ...

  4. 使用hexo，如果换了电脑怎么更新博客？

    自己今天想到这个问题,于是去知乎搜索了一番,发现不甚理想.没找到合适的,题目就是知乎原题.只好自己解决了.以下直接把自己的答案粘贴过来 今天我突然想到这个问题,想来参考参考,却发现都不太适合我.首先, ...

  5. ubuntu 默认防火墙安装、启用、查看状态

    ubuntu 9.10默认的是UFW防火墙,已经支持界面操作了.在命令行运行ufw命令就可以看到提示的一系列可进行的操作. 最简单的一个操作:sudo ufw status可检查防火墙的状态,我的返回 ...

  6. Jmeter教程 简单的压力测试

    Jmeter教程 简单的压力测试:http://www.cnblogs.com/TankXiao/p/4059378.html

  7. RabbitMQ学习系列（二）: RabbitMQ安装与配置

    上一篇,简单介绍了RabbitMQ的情况还有一些相关的概念,这一篇,会讲讲 RabbitMQ安装与配置. 1．安装 Rabbit MQ 是建立在强大的Erlang OTP平台上,因此安装RabbitM ...

  8. Android中使用ShareSDK集成分享功能

    引言      现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了 ...

  9. 分析oracle的执行计划（explain plan）并对对sql进行优化实践

    基于oracle的应用系统很多性能问题,是由应用系统sql性能低劣引起的,所以,sql的性能优化很重要,分析与优化sql的性能我们一般通过查看该sql的执行计划,本文就如何看懂执行计划,以及如何通过分 ...

  10. ThinkPHP Where 条件中使用表达式

    本文转自:这里 Where 条件表达式格式为: $map['字段名'] = array('表达式', '操作条件'); 其中 $map 是一个普通的数组变量,可以根据自己需求而命名.上述格式中的表达式 ...