效果：

代码：

 <!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. 自定义MVP .net框架

      一个自定义MVP .net框架 AngleFrame   摘要:本篇是本人在完成.net平台下一个项目时,对于MVP框架引发的一些思考,以及开发了一个小型的配置型框架,名字叫作AngleFrame ...

  2. Confluence, JIRA, Fisheye

    [tools]迁移Confluence, JIRA, Fisheye   [背景] 原先的Confluence, JIRA, Fisheye都部署在一台服务器(192.168.200.203)上,导致 ...

  3. String类重写

    #include <iostream> #include<string.h> using namespace std; class String { int length; i ...

  4. vijos1009：扩展欧几里得算法

    1009:数论 扩展欧几里得算法 其实自己对扩展欧几里得算法一直很不熟悉...应该是因为之前不太理解的缘故吧这次再次思考,回看了某位大神的推导以及某位大神的模板应该算是有所领悟了 首先根据题意:L1= ...

  5. [置顶] Weblogic节点管理

    配置节点管理之后能方便管理,可以在控制台启动停止被管服务器,一般配置步骤:创建受管服务器,创建machine,屏蔽SSL主机名验证,修改nodemanager.properties,启动nodeman ...

  6. MvcMovieStore实例 教程

    转原创:MvcMovieStore 实例教程(新概念版:mvc5.0,EF6.01)-初露锋芒 如需转载,请注明出处:http://www.cnblogs.com/DoduNet/ 最近趁业余时间,把 ...

  7. spring.NET的依赖注入

    谈谈自己了解的spring.NET的依赖注入   spring.net里实现了控制反转IOC(Inversion of control),也即依赖注入DI(Dependency Injection), ...

  8. [转]Hacking the iOS Spotlight

    原文:http://theiostream.tumblr.com/post/36905860826/hacking-the-ios-spotlight 原文:http://theiostream.tu ...

  9. 正则表达式与领域特定语言（DSL）

    如何设计一门语言(十)——正则表达式与领域特定语言(DSL) 几个月前就一直有博友关心DSL的问题,于是我想一想,我在gac.codeplex.com里面也创建了一些DSL,于是今天就来说一说这个事情 ...

  10. Object-c学习之路二（oc内存管理黄金法则1）

    今天看了看oc的内存管理,自己管理内存不能随便的release和retain 法则会出现野指针等错误.下面以人和读书的例子做练习. 1.主函数 // // main.m // MemoryManage ...