先上代码:

 .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. C# 下划线转驼峰

    /// <summary> /// 转换 /// </summary> /// <param name="sender"></param& ...

  2. 浅谈无旋treap(fhq_treap)

    一.简介 无旋Treap(fhq_treap),是一种不用旋转的treap,其代码复杂度不高,应用范围广(能代替普通treap和splay的所有功能),是一种极其强大的平衡树. 无旋Treap是一个叫 ...

  3. ICEM-圆锥的一种画法

    原视频下载地址:https://yunpan.cn/cqK53dKBnduM9  访问密码 42be ​

  4. 为什么HashMap桶(链表)的长度超过8才会转换成红黑树

    百度了一下,感觉能说清楚的并不多,所以在此记录一下. 首先说一说转换为红黑树的必要性:红黑树的插入.删除和遍历的最坏时间复杂度都是log(n),因此,意外的情况或者恶意使用下导致hashCode()方 ...

  5. MediaPlayer: 在不同控件之间实现视频的无缝切换的方法

    最近使用MediaPlayer + TextureView 实现了一个视频播放器,并且实现了它的横竖屏切换的效果,唯一美中不足的是在横竖屏切换的时候画面会卡顿一下,虽然也不影响播放,但是怕测试会报Bu ...

  6. gitment初始化评论跳回博客首页

    表现 众所周知,gitment评论系统需要初始化以创建对应的issue,可是我在点击login with github的时候,总是跳向博客首页!WTF!什么鬼?这样不程序啊? 排查 1.F12查看lo ...

  7. sql中union,union all没有兼顾到的内容

    今日遇到一个问题,两张表联合取交集去重,但是需要把某一字段相同的也给去掉 union all : 联合,没有取交集 union :联合取交集(仅针对所有字段相同的去重) 解决方案:将联合的数据作为一个 ...

  8. 问题:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.5.1:compile (default-compile)

    一:问题 今天编译maven 项目构建失败,提示内容如下: [ERROR] Failed to execute goal org.apache.maven.plugins:maven-compiler ...

  9. HTML5 地理位置定位API(5)

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  10. osg::NodeVisitor example

    [0]osg::Group [1]osg::MatrixTransform [1] osg::MatrixTransform [1]osg::MatrixTransform [2] osg::Geod ...