先上代码:

 .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. UOJ450 【集训队作业2018】复读机【生成函数】

    题目链接:UOJ EI神仙加强版 既然这题模数是今天日期减去\(7\times 10^5\),那就要赶紧把这题做了. 首先肯定是考虑指数型生成函数,列出来之后使用单位根反演一波. \[\begin{a ...

  2. Mac 下 安装 Nginx

    ---恢复内容开始--- Mac 下 安装nginx 首先确定自己有安装homebrew 安装 nginx brew install nginx 启动nginx 1.15版本下 安装是 直接在ngin ...

  3. 通过时间戳批量删除hbase的数据

    如何通过时间戳批量删除hbase的数据 我们使用hive关联hbase插入数据时,有时会写错数据,此时hbase中的数据量已经很大很大了(上亿).此时,我们要修改错误的数据,只需要删除写错的那部分数据 ...

  4. P2822 组合数问题——巧用前缀和

    P2822 组合数问题 求的是C(i,j)有多少个是k的倍数: 首先,求组合数是有技巧的, 用杨辉三角求组合数,爽的一批: 但是,这样只能得90分,两个点T了: 因为k是不变的,我们可以用前缀和的思想 ...

  5. Python3 内置http.client,urllib.request及三方库requests发送请求对比

    如有任何学习问题,可以添加作者微信:lockingfree 更多学习资料请加QQ群: 822601020获取 HTTP,GET请求,无参 GET http://httpbin.org/get Pyth ...

  6. codeforces#1248D2. The World Is Just a Programming Task(括号匹配转化为折线处理)

    题目链接: http://codeforces.com/contest/1248/problem/D2 题意: 可以执行一次字符交换的操作 使得操作后的字符串,循环移位并且成功匹配的方案最多 输出最多 ...

  7. nginx做反向代理时出现302错误

    现象:nginx在使用非80端口做反向代理时,浏览器访问发现返回302错误 详细现象如下: 浏览器请求登录页: 输入账号密码点击登录: 很明显登录后跳转的地址少了端口号. 原因:proxy.conf文 ...

  8. HNOI2009有趣的数列

    首先next_permutation打表,发现Cat规律. 其实考试的时候这么做没什么问题,而且可以节省异常多的时间,那么现在我们来想一下why. 首先我拿模型法解释一下,我们把2n个数看成2n个人, ...

  9. Celery如何修复Python的GIL问题

    小结: 1. Celery如何修复Python的GIL问题https://python.freelycode.com/contribution/detail/346 最近,我重读了Glyph写的Uny ...

  10. SQL-W3School-函数:SQL AVG() 函数

    ylbtech-SQL-W3School-函数:SQL AVG() 函数 1.返回顶部 1. 定义和用法 AVG 函数返回数值列的平均值.NULL 值不包括在计算中. SQL AVG() 语法 SEL ...