效果：

代码：

 <!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. SpringMVC全注解

    SpringMVC全注解不是你们那么玩的 前言:忙了段时间,忙得要死要活,累了一段时间,累得死去活来. 偶尔看到很多零注解配置SpringMVC,其实没有根本的零注解. 1)工程图一张: web.xm ...

  2. 基于Jquery 简单实用的弹出提示框

    基于Jquery 简单实用的弹出提示框 引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间 ...

  3. TreeMap与TreeSet

    TreeMap与TreeSet TreeSet底层则采用一个NavigableMap来保存TreeSet集合的元素.实际上,由于NavigableMap只是一个接口,因此底层依然是使用TreeMap来 ...

  4. JAVA面试精选

    JAVA面试精选[Java基础第一部分] 这个系列面试题主要目的是帮助你拿轻松到offer,同时还能开个好价钱.只要能够搞明白这个系列的绝大多数题目,在面试过程中,你就能轻轻松松的把面试官给忽悠了.对 ...

  5. ASP.NET MVC 單元測試系列

    ASP.NET MVC 單元測試系列 (7):Visual Studio Unit Test 透過 Visual Studio 裡的整合開發環境 (IDE) 結合單元測試開發是再便利不過的了,在 Vi ...

  6. c#中如何跨线程调用windows窗体控件？

    我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍.首先来看传统方法: public partial c ...

  7. JVM内存划分

    JVM内存划分吗? 前言: 大家都知道虚拟机,都知道JVM,其实这些都是基于sun公司[oracle公司]的HotSpot虚拟机,当然本篇博文也是以sun公司为基础.还有其他的虚拟机,常见的就有JRo ...

  8. 反射实现IOC功能

    通过反射实现IOC功能   这段时间园子里有不少介绍IOC组件的文章,由于自己也一直在学习IOC的各种组件,及IOC的思想,常见的IOC组件很多:AutoFac.Ninject.Utity包括.NET ...

  9. ibatis-Spring 整合

    这两天一直在研究ibatis与spring的整合 一个小小的demo搞的我头晕目眩的,但程序一旦跑起来了,突然有一种豁然开朗,重见天日,感觉生活很美好的感觉!,也许,这就是那一行行的代码带给我们的不同 ...

  10. C++函数调用

    C++函数调用(1) 这篇博客名字起得可能太自大了,搞得自己像C++大牛一样,其实并非如此.C++有很多隐藏在语法之下的特性,使得用户可以在不是特别了解的情况下简单使用,这是非常好的一件事情.但是有时 ...