先上代码:

 .selectData{
height: 0.42rem; position: absolute;
right:.28rem;
top:.30rem;
//去边框
border: none;
outline: none;
//圆角
-moz-border-radius:0.5rem;
-webkit-border-radius:0.5rem;
border-radius:0.5rem; background-color: #003366;
select{
border: none;
outline: none;
line-height: 0.40rem;
//通过padding-left的值让文字居中
padding-left:0.1rem;
background: none;
color: #ffffff; font-style: normal;
font-weight:bold;
}
option{
border: none;
outline: none;
background-color: #003366;
color: #ffffff;
font-weight:bold;
}
}

思想就是

用css美化select框的更多相关文章

  1. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  2. css美化select标签,兼容ie10 ie10+,chrome。但不支持ie9 ie9-

    让ie9 ie9+ 和非ie的浏览器加载这个hack.ie8,ie8- 就用自己的默认样式 <!-- email:416960428@qq.com author:李可 --> <!- ...

  3. jquery美化select,自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  4. 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

  5. 用纯css改变下拉列表select框的默认样式

    http://ourjs.com/detail/551b9b0529c8d81960000007 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事 ...

  6. 纯css改变下拉列表select框的默认样式

    下列CSS就可以解决,原理是将浏览器默认的下拉框样式清除,然后应用上自己的,再附一张向右对齐小箭头的图片即可. select { /*Chrome和Firefox里面的边框是不一样的,所以复写了一下* ...

  7. [转载]用纯css改变下拉列表select框的默认样式

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终 ...

  8. 用纯css改变下拉列表select框的默认样式(转)

    用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息.     在这 ...

  9. 点击盒子选中里面的单选框,并给盒子添加相应样式,美化单选框、复选框样式css用法,响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

随机推荐

  1. python传参数是传值还是传址?

    传址 不可变类型(数值型.字符串.元组): 因变量不能修改,所以运算不会影响到变量自身 可变类型(列表字典):函数体运算可能会更改传入的参数变量.

  2. java四种对象引用类型

    java四种对象引用类型 对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序 ...

  3. 【原】Python基础-字典

    字典是Python唯一内建的映射类型.键可以是数字,字符串和元组. 1 字典的创建 方法一:直接创建 例如: >>> dict = {'key1':'value1', 20: 80} ...

  4. 米津玄師 - Lemon

    Lemon 词:米津玄師 曲:米津玄師 夢(ゆめ)ならば どれほどよかったでしょう 未(いま)だにあなたのことを夢(ゆめ)にみる 忘(わす)れた物(もの)を 取(と)りに帰(かえ)るように 古(ふる) ...

  5. windows 下 安装 Solr

    Solr是一个独立的企业级搜索应用服务器,它对外提供类似于Web-service的API接口.用户可以通过http请求,向搜索引擎服务器提交一定格式的XML文件,生成索引:也可以通过Http Get操 ...

  6. 命令行运行Python脚本时传入参数的三种方式

    原文链接:命令行运行Python脚本时传入参数的三种方式(原文的几处错误在此已纠正) 如果在运行python脚本时需要传入一些参数,例如gpus与batch_size,可以使用如下三种方式. pyth ...

  7. DELPHI10.3.2安卓SDK安装

    DELPHI10.3.2安卓SDK安装 DELPHI10.3.2默认安装以后,还需要安装安卓SDK,才可以编译安卓项目. 1)运行Android Tools 2)勾选安装下面几个

  8. laravel 查询数据库first()返回的数据转数组

    使用 get_object_vars()可以将他抓转为数组get_object_vars — 返回由对象属性组成的关联数组: 在laravel中其实还可以用 toArray(); json_decod ...

  9. 简略描述:一个 url 从输入按下回车键,到页面展示出来,都经历了什么?

    首先,在输入网址按下回车以后,这个时候DNS服务器会通过当前的网址去解析网址的 ip: 在查找到真的 IP 以后,这个时候浏览器会向 web 服务器发起一个 tcp 连接请求(三次握手): 第一次:建 ...

  10. MySQL批量导入Excel数据

    MySQL批量导入Excel数据 1.确定需要导入数据的表名称以及字段,然后在新建的Excel表中,按照表字段正确排序:(注:(Excel文件的名称最好和数据库的名称一致,sheet表的名字最好和表名 ...