美化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. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  2. leetcode

    Coding on LeetCode Online Judge leetcode(leetcode website) Problems algorithms 13. Roman to Integer ...

  3. jQuery中json对象与json字符串互换

    json字符串转json对象:jQuery.parseJSON(jsonStr); json对象转json字符串:JSON.stringify(jsonObj); 根据“|”把字符串变成数组.spli ...

  4. Redis 3.0.5 集群的命令、使用、维护

    cluster命令 CLUSTER INFO 打印集群的信息 CLUSTER NODES 列出集群当前已知的所有节点(node),以及这些节点的相关信息. //节点 CLUSTER MEET < ...

  5. css随笔1

    1.简单清除浏览器样式 *{        padding: 0px;        margin: 0px;    } 2.得到屏幕范围的div html,body{        width: 1 ...

  6. webpack使用的心得

    1 . 我们需要使用打包工具,首先第一步就得 执行 npm install进行安装,可是很多时候 加载速度很慢,这个时候我们可以 用淘宝镜像源,参考地址: p.p1 { margin: 0.0px 0 ...

  7. MVC

    PureMVC--一款多平台MVC框架 http://www.jianshu.com/p/47deaced9eb3 MVC,MVP 和 MVVM 的图示 http://www.ruanyifeng.c ...

  8. nuget包重装

    Update-Package -Reinstall Update-Package -reinstall -ProjectName Cardin.HeartCare.Service.ChatServic ...

  9. Struts2返回json格式数据踩坑记录

    事件起因 昨天提测修改冻结/解冻银行卡样式的功能,微姐测试过程中发现调用ajax请求耗时过长,今天来排查,发现浏览器请求/finance/ajax/freeze/ajaxGetShopLists时,对 ...

  10. Mysql字符集设置

    转 基本概念 • 字符(Character)是指人类语言中最小的表义符号.例如’A'.’B'等:• 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编码(Encodi ...