效果：

代码：

 <!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. 利用Matlab生成一个网格化的三维三轴椭球面（生成直角坐标）

    代码很简单,a,b,c分别为椭球的三轴轴长,a=b=c时得到的是三维球面,a=b!=c时得到的是三维椭球面,a!=b且a!=c且b!=c时得到的是三维旋转椭球面 %生成一个笛卡尔坐标系下三轴椭球表面的 ...

  2. MVVM框架avalon在兼容旧式IE

    迷你MVVM框架avalon在兼容旧式IE做的努力 当前标签: avalon 共3页: 1 2 3 下一页  迷你MVVM框架avalon在兼容旧式IE做的努力 司徒正美 2014-03-13 11: ...

  3. Ecological Premium - UVa10300

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/uva10300.html 题目描述 Pr ...

  4. SQLSERVER一些公用DLL

    SQLSERVER一些公用DLL的作用解释   SQLSERVER一些公用DLL的作用解释 如果你的SQLSERVER安装在C盘的话,下面的路径就是相应SQLSERVER版本的公用DLL的存放路径 S ...

  5. AngularJS的初始化

    AngularJS的初始化 本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过 ...

  6. jquery上传控件uploadify使用备忘

    我简单修改了js和样式,效果如下 使用起来也是超简单,将文件下载并解压到你网站目录下,然后 .在使用位置插入代码 ============================= <iframe wi ...

  7. Asp.Net MVC 3

    Asp.Net MVC 3   wcf基础教程之 契约(合同)Contract 摘要: 在前几篇博客中我有说到服务的寄宿,就是服务要运行起来必须采取的几种方式,相当于我们可以照葫芦画瓜的效果运行一个w ...

  8. .Net 异步随手记（三）

    从<.Net 异步随手记(二)>来看,总感觉还差点儿什么,就是对不同情况的处理.比如当一个 Task 完成了后,我想让它继续执行 T1,如果被取消了就去执行 T2,如果...就去执行 T3 ...

  9. CentOS5、6 NFS的安装配置及mount方法

    一.环境介绍: 服务器:centos 192.168.1.225 客户端:centos 192.168.1.226 二.安装: NFS的安装配置:centos 5 : yum -y install n ...

  10. .net调用Outlook 批量发送邮件，可指定Outlook中的账号来发送邮件

    .net调用Outlook 批量发送邮件,可指定Outlook中的账号来发送邮件 源码可以在我的资源列表中下载: MPOEMail http://download.csdn.net/my VS2012 ...