html美化select样式,select样式美化（简单实用）

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

.sel_mask{ /*将相对定位*/

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{ /*以相同大小将绝对定位*/

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;

}

请选择

请选择

选项一

选项二

选项三

选项四

选项五

选项六

选项七

$(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');

})

})

以下附2张 图片：

           

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

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

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

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

简单实用的原生PHP分页类

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

jQuery的几种简单实用效果

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

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

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

C#_简单实用的翻页

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

CSS select样式优化 含jquery代码

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

&lt ...

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

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

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

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

随机推荐

【转】What is an SDET

What is an SDET? SDET stands for Software Development Engineer in Test (or Software Design Engineer ...

php大力力 [049节] php函数implode()

implode()[1]  函数返回一个由数组元素组合成的字符串. 注释:implode() 函数接受两种参数顺序.但是由于历史原因,explode() 是不行的,您必须保证 separator 参数 ...

C#驱动及应用

一,使用开源客户端:StackExchange.Redis 二,使用方法:     1,获取访问redis数据库连接,代码如下. /// /// 获取访问redis数据 ...

SQL Server中行列转换

典型实例 一.行转列 1.建立表格 ifobject_id('tb')isnotnulldroptabletb go createtabletb(姓名varchar(10),课程varchar(10) ...

C# try catch finally 执行

try { //dosomething eg: int a = 1; int b = 2; int c = a + b; if(c>2) { return; } } catch(Exceptio ...

POJ 1577 Falling Leaves

题意:给出一些字符串,从上到下的建树,输出其前序遍历 像前面那一题一样,先建树,然后再递归前序遍历 不过想像上一题那样用数组建树,建树和上题一样的办法,可是应该怎么输出前序遍历呢= = 还是看的题解= ...

CodeForces-731B

如果当天有m支队伍,昨天选择了k个B方案,那么今天还需要买m-k个披萨,如果m-k是奇数,那就先买一种B,剩下的全部买A,如果是偶数,全部买A.如果中途出现只有0支队伍,然而昨天却买了一次B,那么直接 ...

Centos防火墙设置与端口开放的方法

Centos升级到7之后,内置的防火墙已经从iptables变成了firewalld.所以,端口的开启还是要从两种情况来说明的,即iptables和firewalld.更多关于CentOs防火墙的最新 ...

linux 实践到的命令 collection

查看文件夹/文件 大小:du   :(disk usage) 要通过 1024 字节块概述一个目录树及其每个子树的磁盘使用情况,请输入: du -k /home/fran/filename 这在/ho ...