如图实现这样的效果:

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以及其中的三角形的更多相关文章

  1. CSS效果:CSS select样式优化 含jquery代码

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

  2. 结合 CSS3 & Canvas 模拟人行走的效果

    HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...

  3. CSS效果:这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>. 今天这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html ...

  4. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

  5. 通过JS模拟select表单,达到美化效果[demo][转]

    转自: http://www.cnblogs.com/dreamback/p/SelectorJS.html 通过JS模拟select表单,达到美化效果 Demo ------------------ ...

  6. 通过JS模拟select表单,达到美化效果[demo]

    .m-form{background:#fff;padding:50px;font-family:12px/1.5 arial,\5b8b\4f53,sans-serif;} .m-form ul,. ...

  7. CSS效果篇--这里有你想要的CSS3漂亮的自定义Checkbox各种复选框

    在原来有一篇文章写到了<CSS效果篇--纯CSS+HTML实现checkbox的思路与实例>.这篇文章主要写各种自定义的checkbox复选框,实现如图所示的复选框: 大致的html代码都 ...

  8. 利用jquery模拟select效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 模拟select控件,css模拟下拉

    <!DOCTYPE html > <head>     <meta http-equiv="Content-Type" content="t ...

随机推荐

  1. Pycharm永久激活方式

    1.首先下载pycharm破解包 http://idea.lanyus.com/ 2. 将下载的文件放入PyCharm安装bin目录下: 3.在pycharm.exe.vmoptions ,pycha ...

  2. LabVIEW(二):计数器应用

    1.计数器结构 —>Gate Output—> Counter Register —>Source 其中: Source:被计数的输入源信号 Gate:切断计数是否启动的门控信号 O ...

  3. nginx配置tp5的pathinfo模式并隐藏后台入口文件

    server { listen 2223; server_name manage; access_log /data/wwwlogs/access_manage.log combined; root ...

  4. Static了解和复习继承。

    Static了解 static加在局部变量的前面改变其存储类型使之成为静态局部变量,会延长它的生存周期,但是不会改变其作用域. 静态成员是属于类的,而不是属于某个对象的.即便没有任何一个实例,类的静态 ...

  5. netty中的传输

    终于在课设的闲时间把netty实战的四五章给解决了 这里来记录一下第四章里面所讲的IO 首先说到IO,我想,必须要先了解阻塞,非阻塞,同步和异步这四个词 看到一个讲的很易懂的例子:https://ww ...

  6. 从非标准的POST数据流中提取文件

    1 接收数据流转成字符串,注意编码 byte[] recv= Request.BinaryRead(Request.TotalBytes);string sourceByte = Encoding.U ...

  7. 【shiro】(4)---Shiro认证、授权案例讲解

    Shiro认证.授权案例讲解 一.认证  1. 认证流程     2.用户密码已经加密.加盐的用户认证 (1)测试类 // 用户登陆和退出,这里我自定了一个realm(开发肯定需要自定义realm获取 ...

  8. Day2----Python学习之路笔记(2)

    学习路线: Day1 Day2 Day3 Day4 Day5 ...待续 一.简单回顾一下昨天的内容 1. 昨天了解到了一些编码的知识 1.1. 我们写好的.py文件头没有加# -*- coding: ...

  9. Netty实现简单HTTP代理服务器

    自上次使用Openresty+Lua+Nginx的来加速自己的网站,用上了比较时髦的技术,感觉算是让自己的网站响应速度达到极限了,直到看到了Netty,公司就是打算用Netty来替代Openresty ...

  10. PHP接口的思考

    其中就有一个SPL(标准PHP库)的尝试,SPL中实现一些接口,其中最主要的就是Iterator迭代器接口,通过实现这个接口,就能使对象能够用于foreach结构,从而在使用形式上比较统一.比如SPL ...