CSS效果:CSS3实现模拟select以及其中的三角形
如图实现这样的效果:
html代码如下:
<div class="select-bg">
<select class="select-green">
<option value="">高级客户经理</option>
<option value="">中级客户经理</option>
</select>
</div>
css样式代码:
.select-bg{
display:block;
width:200px;
margin:0 auto;
height: 30px;
line-height: 37px;
font-size: 13px;
border:1px #0f7fc7 solid ;
box-sizing:border-box;
cursor: pointer;
position: relative;
} .select-bg:after{
content:' ';
position: absolute;
right:6px;
top:50%;
margin-top:-5px;
width:0px;
height:0px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #0f7fc7;
font-size:0px;
line-height:0px
} .select-green {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
outline: none;
border: 0 none;
position: relative;
padding: 0 0 0 5px;
width: 100%;
color:#0f7fc7;
font-weight: bold;
background: none;
background-color: transparent;
font-size: 13px;
z-index:;
overflow: hidden;
}
CSS效果:CSS3实现模拟select以及其中的三角形的更多相关文章
- CSS效果:CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- 结合 CSS3 & Canvas 模拟人行走的效果
HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...
- CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...
- jquery实现模拟select下拉框效果
<IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...
- 通过JS模拟select表单,达到美化效果[demo][转]
转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...
- 通过JS模拟select表单,达到美化效果[demo]
.m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...
- CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...
- 利用jquery模拟select效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 模拟select控件,css模拟下拉
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="t ...
随机推荐
- 吴恩达机器学习笔记51-初始值重建的压缩表示与选择主成分的数量K(Reconstruction from Compressed Representation & Choosing The Number K Of Principal Components)
一.初始值重建的压缩表示 在PCA算法里我们可能需要把1000 维的数据压缩100 维特征,或具有三维数据压缩到一二维表示.所以,如果这是一个压缩算法,应该能回到这个压缩表示,回到原有的高维数据的一种 ...
- Scala - 快速学习08 - 函数式编程:高阶函数
函数式编程的崛起 函数式编程中的“值不可变性”避免了对公共的可变状态进行同步访问控制的复杂问题,能够较好满足分布式并行编程的需求,适应大数据时代的到来. 函数是第一等公民 可以作为实参传递给另外一个函 ...
- C# 配置文件Xml读写
分析xxx.exe.config文件: <?xml version="1.0" encoding="utf-8"?> <configurati ...
- CentOS7.0小随笔——指令基本操作(Part.B)
一.文件与目录基本操作指令 touch命令 在Linux中,touch指令可以建立一个空文件 但如果创建的文件本身存在(指在同一目录下),则会修改文件最后的访问时间,并不会更改文件内的内容. 例:# ...
- Unity UI性能优化技巧
本文将介绍一些提升Unity UI性能的技巧.更多优化技巧,可以观看Unity工程师Ian Dundore在Unite Europe 2017的演讲<使用Unity性能提升技巧>. 1.划 ...
- OSI七层协议模型、TCP/IP四层模型和五层协议体系结构之间的关系
一.OSI七层模型 OSI七层协议模型主要是:应用层(Application).表示层(Presentation).会话层(Session).传输层(Transport).网络层(Network).数 ...
- Hive基础之Hive数据类型
Hive数据类型 参考:中文博客:http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2843448.html 英文:https: ...
- Go语言学习笔记(六) [包]
日期:2014年7月30日 1.定义:包时函数和数据的集合.使用package关键字定义一个包,文件名不需要与包名一致,包名约定使用小写字符,Go包可以由多个文件组成,但是需要使用相同的packa ...
- Linux中文件MD5校验
md5sum命令用于生成文件的md5数字摘要,并可以验证文件内容是否发生了改变,间接地还可以检验两个文件内容是否完全相同.因为md5sum是读取文件内容来计算校验码的,因此只能验证文件内容,而无法验证 ...
- Perl的数值和字符串
数值和字符串 数值 perl中以双精度(浮点数)方式保存和运算数值的方式 就算写的是整数,在内部也会转换成等效的浮点数类型保存. 但在perl内部,有些运算会将浮点数转换成整型进行,而且也有integ ...