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 ...
随机推荐
- Pycharm永久激活方式
1.首先下载pycharm破解包 http://idea.lanyus.com/ 2. 将下载的文件放入PyCharm安装bin目录下: 3.在pycharm.exe.vmoptions ,pycha ...
- LabVIEW(二):计数器应用
1.计数器结构 —>Gate Output—> Counter Register —>Source 其中: Source:被计数的输入源信号 Gate:切断计数是否启动的门控信号 O ...
- nginx配置tp5的pathinfo模式并隐藏后台入口文件
server { listen 2223; server_name manage; access_log /data/wwwlogs/access_manage.log combined; root ...
- Static了解和复习继承。
Static了解 static加在局部变量的前面改变其存储类型使之成为静态局部变量,会延长它的生存周期,但是不会改变其作用域. 静态成员是属于类的,而不是属于某个对象的.即便没有任何一个实例,类的静态 ...
- netty中的传输
终于在课设的闲时间把netty实战的四五章给解决了 这里来记录一下第四章里面所讲的IO 首先说到IO,我想,必须要先了解阻塞,非阻塞,同步和异步这四个词 看到一个讲的很易懂的例子:https://ww ...
- 从非标准的POST数据流中提取文件
1 接收数据流转成字符串,注意编码 byte[] recv= Request.BinaryRead(Request.TotalBytes);string sourceByte = Encoding.U ...
- 【shiro】(4)---Shiro认证、授权案例讲解
Shiro认证.授权案例讲解 一.认证 1. 认证流程 2.用户密码已经加密.加盐的用户认证 (1)测试类 // 用户登陆和退出,这里我自定了一个realm(开发肯定需要自定义realm获取 ...
- Day2----Python学习之路笔记(2)
学习路线: Day1 Day2 Day3 Day4 Day5 ...待续 一.简单回顾一下昨天的内容 1. 昨天了解到了一些编码的知识 1.1. 我们写好的.py文件头没有加# -*- coding: ...
- Netty实现简单HTTP代理服务器
自上次使用Openresty+Lua+Nginx的来加速自己的网站,用上了比较时髦的技术,感觉算是让自己的网站响应速度达到极限了,直到看到了Netty,公司就是打算用Netty来替代Openresty ...
- PHP接口的思考
其中就有一个SPL(标准PHP库)的尝试,SPL中实现一些接口,其中最主要的就是Iterator迭代器接口,通过实现这个接口,就能使对象能够用于foreach结构,从而在使用形式上比较统一.比如SPL ...