效果：

代码：

 <!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选择框的样式的更多相关文章

  1. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  2. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  3. Chosen：Select 选择框的华丽变身

    HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...

  4. Notes: select选择框

    HTML选择框通过select标签创建,该元素是HTMLSelectElement的实例,拥有以下属性和方法: selectedIndex:选中项的索引 options:选择框的所有选项 add:向选 ...

  5. 用纯css改变select的下拉菜单

    select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/ border: solid 1px #000; /*很关键:将默认的select选择框样式清除*/ appe ...

  6. select选择框在谷歌火狐和IE样式的不同

    select选择在不同浏览器不同的显示样式, 在IE中 虽然默认和谷歌一样,但是当点击时向下 按钮消失, 解决方法如下: select { /*Chrome和Firefox里面的边框是不一样的,所以复 ...

  7. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  8. select选择框实现跳转

    select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...

  9. iiview Select 选择框打勾选中的内容label和展示的不一致

    Select选择框里加入了OptionGroup.option ; 以及input输入框支持模糊搜索: 不一致的原因:缺少  :label-in-value="true";官方文档 ...

随机推荐

  1. Ninject的项目情况

    Ninject的项目情况 首先,它有很多的项目组成,适合不同的环境,当然它有几个基本的核心库. 为什么它会有这么多的库呢?因为轻量级,易于使用和被扩展是它的目标,代码越是少,你使用代码的可能性越高嘛. ...

  2. iOS基础 - 数据库CoreData

    一.iOS应用数据存取的常用方式 XML属性列表 —— PList NSKeyedArchiver 归档 Preference(偏好设置) SQLite3 Core Data 二.Core Data简 ...

  3. sendrose【SPFA】

    之前看到一题需要并查集+SPFA,然后就特别囧的发现自己SPFA这个历史遗留问题已经不知道怎么打了╮(╯▽╰)╭ 就果断挑了一题特别裸的SPFA赶紧搞搞掉,顺便自己乱YY下学SPFA的笔记,免得自己下 ...

  4. springMVC3学习(十)--注解式控制器

    Spring2.5引入注解式处理器支持,通过@Controller和@RequestMapping注解定义 我们的处理器类.并且提供了一组强大的注解 需要通过处理器映射DefaultAnnotatio ...

  5. java文件上传--基于ajaxFileUpload+struts2

    jQuery插件ajaxFileUpload可以实现ajax文件上传,使用非常简单. 下面做一个简单的demo(以上传图片为例),实现图片上传,图片显示,图片下载 注:以下的代码是在项目的基础上进行开 ...

  6. 总结C++中取成员函数地址的几种方法

    这里, 我整理了4种C++中取成员函数地址的方法, 第1,2,4种整理于网上的方法, 第3种cdecl_cast是我自己想到的. 其中, 第4种(汇编)的方法不能在VC6上编译通过. 推荐使用第1,2 ...

  7. storm源码之巧用java反射反序列化clojure的defrecord获取属性值

    [原创]storm源码之巧用java反射反序列化clojure的defrecord获取属性值 [原创]storm源码之巧用java反射反序列化clojure的defrecord获取属性值 storm源 ...

  8. Page_Load接收随机参数放到字典类中

    Page_Load接收随机参数放到字典类中,可以用作签名.普通的接收url的参数可以用作下面这种模式:  int appid =Convert.ToInt32(param["appid&qu ...

  9. 风萧萧兮易水寒 coding一去兮不复还

    这一年都在忙碌中渡过.没有看过日落没有享受过日常.希望可以在忙碌中有些收获.工作马上要三年了. 风萧萧兮易水寒 coding一去兮不复还 记的刚毕业的时候喜欢自己晚上更新下博客.那时候也很忙.但是后来 ...

  10. 40w会议投票系统优化方案

    40w会议投票系统优化方案 最近2天谈了一个项目,根据提出的需求是,该系统本来是属于一个大系统的分割出来的一个很小的系统,但是由于是并发关系会耗费资源很大,所以分割出来.据了解,系统采用的mysql+ ...