【css2、css3】css改变select选择框的样式
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 去掉默认样式，设置新的样式 */
.select-style{
position: relative;
display: inline-block;
}
.select-style select{
display:inline-block;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:5px 15px 5px 5px;
line-height:inherit;
color:inherit;
cursor:pointer;
font-size:14px;
position:relative;
z-index:3;
height:100%;
border-radius:2px;
}
.select-style:after{
content:'*';
color:red;
position:absolute;
top: 0;
bottom:0;
right:5px;
height:100%;
padding:5px 0;
}
.select-style select option{
color:#222;
}
.select-style select option:hover{
background:#535353;
color:#fff;
}
.select-style select option:checked{
background:#535353;
color:#fff;
}
</style>
</head>
<body>
<!-- html 布局 -->
<span class="select-style">
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
<option>option 5</option>
</select>
</span>
</body>
</html>
个人博客：[**午后南杂**](http://recoluan.gitlab.io)
【css2、css3】css改变select选择框的样式的更多相关文章
- 类似 select 选择框效果及美化
网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...
- Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决
Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...
- Chosen：Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...
- Notes: select选择框
HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...
- 用纯css改变select的下拉菜单
select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...
- select选择框在谷歌火狐和IE样式的不同
select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...
- AngularJS初始化Select选择框
一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- iiview Select 选择框打勾选中的内容label和展示的不一致
Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少 :label-in-value="true";官方文档 ...
随机推荐
- 关于ListView中convertView的缓存个数的探究
在面试的时候经常会被问到一个有关ListView的问题:一个ListView的高度最多可以显示5个item,但是却有20条数据要显示,问最多会有多少个convertView会被复用?或者如在ListV ...
- storm搭建（1）zookeeper搭建
storm集群的安装我用了三台的虚拟机,ip分别是192.168.9.202和203和204,其中主机是202,两台分机的ip是203和204,之前两台机器的搭建已经完成,这次安装的环境是在204机器 ...
- 基于SQLite日志记录工具--Log4W
最近压迫自己写点自己的东西,但是水平不高,槽点多,望各位请轻喷,嘿嘿! 以前用过一个Log4Net的东东,但是保存的是文本文件,不好过滤,而且用的不多,也不太熟悉,所以自己也当写一个练练手吧! ...
- go语言 strconv.ParseInt 的例子
golang strconv.ParseInt 是将字符串转换为数字的函数,功能灰常之强大,看的我口水直流. func ParseInt(s string, base int, bitSize int ...
- 类图class的依赖关系
类图class的依赖关系 相关文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) ...
- WCF/WPF公司内部订餐程序开发
WCF/WPF公司内部订餐程序开发 (服务端篇) 上班的第一天,群里讨论关于订餐的问题,所以想到了要不要自己开发一个公司内部的订餐系统呢?方便公司内部员工的订餐,有了想法就简单的实践了下 . 实现还是 ...
- IOS7学习之路一（新UI之自定义UITableViewCell）
ios7 新升级之后界面有了很大的变化,xcode模拟器去掉了手机边框和home键,如果想回到主页面,可以按住shift+comment+r键.废话少说先展示一下新UI下UItableView设置为G ...
- 运用Unity实现依赖注入[结合简单三层实例]
运用Unity实现依赖注入[结合简单三层实例] 一:理论部分 依赖注入:这是 Ioc 模式的一种特殊情况,是一种基于改变对象的行为而不改变类的内部的接口编程技术.开发人员编写实现接口的类代码,并基于接 ...
- OC-变量和数据类型
对象的初始化 Fraction *myFract=[[Fraction alloc] init];//初始化对象 [myFract setTo:1 over:3];//设置初始值 初始化对象和设置初始 ...
- Java笔记：内部类
1.把一个类放在另一类内部定义,这个定义在其他类里面的类就叫做内部类,包含内部类的类叫做外部类.内部类成员可以直接访问外部类的私有数据,但是外部类不能访问内部类的实现细节. 2.非静态内部类(没有st ...