效果：

代码：

 <!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. WCF RIA Services异常

    .svc处理程序映射缺失导致的WCF RIA Services异常 在确定代码.编译结果和数据库都正常的情况下,无法从数据库取到数据.错误提示:Sysyem.Net.WebException:远程服务 ...

  2. 在GridView的中有一个DropDownList，并且DropDownList有回传事件

    在GridView的中有一个DropDownList,并且DropDownList有回传事件 最近做一个项目,需要在GridView中的ItemTemplate中添加一个DropDownList,并且 ...

  3. Binder机制，从Java到C （2. IPC in System Service ：AMS）

    1.建立Activity和Service的IPC之前 在上一篇 Binder机制,从Java到C (1. IPC in Application Remote Service)  里面有说到Activi ...

  4. c#中解决winform中控件不能输入汉字的办法

    设置控件的ImeMode属性 如:    textBox.ImeMode = System.Windows.Forms.ImeMode.On; 其中枚举有如下值:

  5. Trie字典树算法

    特性 Trie树属于树形结构,查询效率比红黑树和哈希表都要快.假设有这么一种应用场景:有若干个英文单词,需要快速查找某个单词是否存在于字典中.使用Trie时先从根节点开始查找,直至匹配到给出字符串的最 ...

  6. 支持异步同步的分布式CommandBus MSMQ实现

    支持异步同步的分布式CommandBus MSMQ实现 先上一张本文所描述的适用场景图 分布式场景,共3台server: 前端Server Order App Server Warehouse App ...

  7. Direct2D

    Direct2D Direct2D教程III——几何(Geometry)对象 摘要: 目前博客园中成系列的Direct2D的教程有1.万一的 Direct2D 系列,用的是Delphi 20092.z ...

  8. PostgreSQL数据的导出导入 save your data!

    PostgreSQL数据的导出导入 导出PostgreSQL数据库中的数据: $ pg_dump -U postgres  -f mydatabase.sql  mydatabase 导入数据时首先创 ...

  9. 设计模式之 - 外观模式 （Facade design pattern）

    1. 模式意图:  为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更容易使用. 2. 结构 3. 工厂方法模式C#实现 using System; ...

  10. [置顶] Nosql笔记（一）——关系型数据库回顾

    Nosql笔记(一)——关系型数据库回顾 在平常的商业应用中,我们所使用的大多都是关系型数据库,诸如SQL  Server. MY SQL. Oracle等. 关于关系型数据库中的关键技术: 存储引擎 ...